onChange Olayı (Event)

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

Dönüş Değeri

Ö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

• Event Nesnesi
• event.altKey
• event.button
• event.cancelBubble
• event.charCode
• clientX ve clientY
• event.ctrlKey
• event.currentTarget
• event.eventPhase
• event.initEvent()
• event.initKeyEvent()
• event.initMouseEvent()
• event.keyCode
• layerX ve layerY
• offsetX ve offsetY
• pageX ve pageY
• event.preventDefault()
• screenX ve screenY
• event.shiftKey
• event.stopPropagation()
• event.target
• event.type
• event.which
• event.x ve event.y