HTML DOM addEventListener() yöntemi

Tanım ve Kullanım

addEventListener() 事件 işleyici programını elemana eklemek için yöntem.

Örnek

Örnek 1

<button> elementine click olayı ekleyin：

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Kişisel olarak deneyin

Örnek 2

Daha sıkışık kod:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

Kişisel olarak deneyin

Daha fazla örnek için sayfanın altına bakabilirsiniz.

Sözdizimi

element.addEventListener(type, function, useCapture)

Parametre

Parametre Açıklama
type

Gerekli. Olayın adı.

"on" öneki kullanmayın.

"click" yerine "onclick" kullanmayın.


DOM olaylarının tam listesi
function Gerekli. Olay olduğunda çalışacak fonksiyon.
useCapture

Opsiyonel (varsayılan = false).

  • false - Yükselen dalga aşamasında çalışan işleyici.
  • true - Yakalama aşamasında çalışan işleyici.

Dönüş değeri

Yok.

Teknik ayrıntılar

belirtilen olay türünü işlemek için mevcut düğümün dinleyici koleksiyonuna belirtilen olay dinleyici fonksiyonunu ekler. type olayında useCapture true olarak ayarlanırsa, dinleyici yakalama olay dinleyicisi olarak kaydedilir. Eğer useCapture false olarak ayarlanırsa, normal olay dinleyicisi olarak kaydedilir.

addEventListener() birkaç kez çağrılabilir, aynı düğümde aynı tür olaya birden fazla olay işleyici kaydedebilirsiniz. Ancak, DOM birden fazla olay işleyicisinin çağrılma sırasını belirleyemez.

Bir olay dinleyici fonksiyonu aynı düğümde aynı type ve useCapture aynı parametre iki kez kaydedildiğinde, ikinci kayıt göz ardı edilir. Bir düğüm üzerinde olay işleme işlemi yaparken, bu düğümde yeni bir olay dinleyicisi kaydedildiğinde, bu olay için yeni olay dinleyicisi çağrılmaz.

parametre olarak kaydedildiğinde Node.cloneNode() yöntem veya Document.importNode() Bir Document düğümünü kopyalarken, orijinal düğümde kayıtlı olay dinleyicilerini kopyalamaz.

Bu yöntem de Document ve Window Bu nesnede tanımlanmış ve benzer şekilde çalışır.

Daha fazla örnek

Örnek 3

Aynı elemanta birçok olay ekleyebilirsiniz：

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

Kişisel olarak deneyin

Örnek 4

Aynı elemanta farklı olayları ekleyebilirsiniz：

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

Kişisel olarak deneyin

Örnek 5

Parametre değerlerini iletmek için "anonim fonksiyon" kullanın:

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

Kişisel olarak deneyin

Örnek 6

<button> elementinin arka plan rengini değiştirme:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Kişisel olarak deneyin

Örnek 7

Yayılma ve yakalama arasındaki fark:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Kişisel olarak deneyin

Örnek 8

Olay işleyici silme:

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

Kişisel olarak deneyin

Tarayıcı desteği

element.addEventListener() DOM Level 2 (2001) özelliğidir.

Tüm tarayıcılar tamamen destekler:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek 9-11 Destek Destek Destek Destek

İlgili sayfalar

Element yöntemleri:

addEventListener() yöntemi

removeEventListener() yöntemi

Doküman yöntemleri:

addEventListener() yöntemi

removeEventListener() yöntemi

Eğitim:

HTML DOM EventListener

DOM olaylarının tam listesi