JavaScript HTML DOM Olay Dinleyicileri

addEventListener() metodu

Örnek

Kullanıcı butona tıkladığında tetiklenen olay dinleyicisi ekleyin:

document.getElementById("myBtn").addEventListener("click", displayDate);

Kişisel olarak deneyin

addEventListener() Belirtilen elemente belirli bir olay işleyici ekler.

addEventListener() Mevcut olay işleyicilerini değiştirmeksizin bir elemente olay işleyici ekler.

Bir elemente birden fazla olay işleyici ekleyebilirsiniz.

Aynı türdeki olay işleyicisini ekleyebilirsiniz, örneğin iki "click" olayı.

Herhangi bir DOM nesnesine olay işleyicisi ekleyebilirsiniz, sadece HTML elementi değil, örneğin window nesnesi.

addEventListener() Yöntem kullanarak

bubbling nasıl kontrol edileceğini daha kolay hale getirir. addEventListener() Yöntem kullanırken

Yöntem kullanırken, JavaScript ile HTML işaretleri ayrılmıştır, bu da daha iyi okunabilirlik sağlar; HTML işaretlerini kontrol etmeyen durumda bile olay dinleyicisi ekleyebilirsiniz. removeEventListener() Olay dinleyicisini kolayca kaldırmanızı sağlar.

Sözdizimi

element.addEventListener(event, function, useCapture);

İlk parametre olay türüdür (örneğin "click" veya "mousedown").

İkinci parametre, olay meydana geldiğinde çağrılması gereken fonksiyondur.

Üçüncü parametre boolean değeridir ve olayın yuvarlanma (bubbling) veya yakalama (capturing) kullanıp kullanılmayacağını belirtir. Bu parametre seçmeli'dir.

Dikkat:Olaylara "on" öneki kullanmayın; "onclick" yerine "click" kullanın.

Elemente olay işleyicisi ekleyin

Örnek

Kullanıcı bir elemente tıkladığında "Hello World!" uyarısı verin:

element.addEventListener("click", function(){ alert("Hello World!"); });

Kişisel olarak deneyin

Dışarıdan "adlandırılmış" bir fonksiyonu da çağırabilirsiniz:

Örnek

Kullanıcı bir elemente tıkladığında "Hello World!" uyarısı verin:

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

Kişisel olarak deneyin

Aynı elemente çoklu olay işleyicisi ekleyin

addEventListener() Bu yöntem, aynı elemente çoklu olay eklemeyi sağlar ve mevcut olayları değiştirmez:

Örnek

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Kişisel olarak deneyin

Aynı elemente farklı türdeki olayları ekleyebilirsiniz:

Örnek

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Kişisel olarak deneyin

Window nesnesine olay işleyicisi ekleyin

addEventListener() Size, HTML DOM nesnesine (örneğin HTML elementi, HTML nesnesi, window nesnesi veya olayları destekleyen diğer nesnelere) olay dinleyicisi eklemeyi sağlar, örneğin xmlHttpRequest nesnesi.

Örnek

Kullanıcının pencere boyutunu ayarladığında tetiklenen olay dinleyicisini eklemek için:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

Kişisel olarak deneyin

Parametreleri geçirin

Parametre değeri geçildiğinde, belirtilen fonksiyonu çağıran "anonim fonksiyon" olarak parametre kullanın:

Örnek

element.addEventListener("click", function(){ myFunction(p1, p2); });

Kişisel olarak deneyin

Olay yükselir mi yoksa yakalanır mı?

HTML DOM'da iki olay yayılım yöntemi vardır: yükselme ve yakalama.

Olay yayılımı, olay meydana geldiğinde element sırasını belirlemek için bir yöntemdir. Eğer <div> elementi içinde bir <p> varsa ve kullanıcı bu <p> elementini tıkladıysa, hangi elementin "click" olayı önce işlenmeli?

Yükselme durumunda, en içsideki elementin olayı önce işlenir, ardından daha dışsideler: Öncelikle <p> elementinin tıklama olayı işlenir, ardından <div> elementinin tıklama olayı işlenir.

Yakalama durumunda, en dıştaki elementin olayı önce işlenir, ardından daha içsideler: Öncelikle <div> elementinin tıklama olayı işlenir, ardından <p> elementinin tıklama olayı işlenir.

addEventListener() yönteminde, "useCapture" parametresini kullanarak yayılım türünü belirleyebilirsiniz:

addEventListener(event, function, useCapture);

varsayılan değer falseise, yükselme yayılımı kullanılır, bu değer trueise olay, yakalama yayılımı kullanılır.

Örnek

document.getElementById("myP").addEventListener("click", myFunction(), true);
document.getElementById("myDiv").addEventListener("click", myFunction(), true);

Kişisel olarak deneyin

removeEventListener() yöntemi

removeEventListener() removeEventListener() yöntemi aracılığıyla eklenmiş addEventListener() Yöntem eklenmiş olay işleyicileri:

Örnek

element.removeEventListener("mousemove", myFunction());

Kişisel olarak deneyin

Tarayıcı Desteği

Tablo içindeki rakamlar, bu yöntemlerin tamamen desteklenen ilk tarayıcı sürümünü belirler.

Yöntem
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Açıklama:IE 8, Opera 6.0 ve daha eski sürümleri desteklemiyor addEventListener() ve removeEventListener() Yöntem. Ancak, bu özel tarayıcı sürümleri için attachEvent()} Metod, elemente olay işleyici ekler ve detachEvent() Metod silme:

element.attachEvent(event, function);
element.detachEvent(event, function);

Örnek

Çapraz tarayıcı çözümü:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // IE 8 ve daha eski sürümler dışındaki popüler tarayıcılar için
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 ve daha eski sürümler için
    x.attachEvent("onclick", myFunction);
}

Kişisel olarak deneyin

HTML DOM Event Nesnesi Referans Kılavuzu

Tüm HTML DOM olaylarının listesi için, tam listemizi ziyaret edin HTML DOM Event Nesnesi Referans Kılavuzu.