JavaScript onChange olayı (event), ilgili elementin değeri değiştiği zaman tetiklenir. HTML onChange özelliği element üzerinde change olayı gerçekleştiği zaman çalıştırılacak fonksiyonun veya betiğin (script) belirtilmesini sağlar.
onChange olayı, gerçek zamanlı bir kontrol yapmaz. Değişim kontrolü ilgili elementten çıkıldığı zaman yapılır.
HTML dahilindeki sadece tek bir fonksiyon belirtilebilen bu tip olay yönetim fonksiyonlarına olay tutucu (event handler) ismi verilir. Fakat, HTML DOM'da birden fazla olay yönetim fonksiyonu belirtilebildiği için olay tutucusu isminden ziyade olay dinleyici (event listener) ismi kullanılmaktadır. DOM'da olay dinleyici fonksiyonlar attachEvent ve addEventListener fonksiyonları ile ilgili elemente eklenebilir/bağlanabilir.
HTML Sözdizimi
<element onchange="betik" > ... </element>
DOM Sözdizimi
element.onchange = fonkBetik;
betik = element.onchange
| betik | onchange olayı tetiklendiğinde çalıştırılacak betik (script) kodlarını belirtir. |
| fonkBetik | onchange olayı tetiklendiğinde çalıştırılacak fonksiyon adını veya betik kodlarını belirtir. |
Dönüş Değeri
| betik | Fonksiyon belirtildiyse fonksiyon gövdesi veya betik kodları döner. |
Örnek
Aşağıdaki örnek, JavaScript onChange olay tutucu kullanarak metin kutusu (input-text) içindeki değerin çıkışta değişip-değişmediğinin kontrol edilmesini göstermektedir.
<script type="text/javascript">
function Temizle() {
document.getElementById('uyar').innerHTML = '';
}
function Uyar() {
document.getElementById('uyar').innerHTML='onChange oldu!';
}
</script>
<input name="metinkutu" type="text" value="myNotlar"
onFocus="Temizle();"
onChange="Uyar();">
<span id="uyar"></span>
Test Edin
Elementler
change olayının gerçekleşebileceği/kontrol edilebileceği HTML etiketleri/elementleri
INPUT | INPUT-hidden | INPUT-text | INPUT-password | INPUT-checkbox | INPUT-radio | INPUT-submit | INPUT-reset | INPUT-file | INPUT-image | INPUT-button | OPTGROUP | OPTION | SELECT | TEXTAREA