HTML DOM Document addEventListener() metodu

Tanım ve Kullanım

addEventListener() Yöntem, olay işleyicisini belgeye ekler.

Örnek

Örnek 1

Belgeye click olayını ekleyin:

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

Kişisel olarak deneyin

Daha basit sözdizimi:

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

Kişisel olarak deneyin

Örnek 2

Belgeye çoklu olay dinleyicileri ekleyebilirsiniz:

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

Kişisel olarak deneyin

Örnek 3

Farklı türdeki olayları ekleyebilirsiniz:

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

Kişisel olarak deneyin

Örnek 4

Parametreleri iletilirken "adlandırılmamış fonksiyon" kullanarak fonksiyonu çağırın:

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

Kişisel olarak deneyin

Örnek 5

Belgenin arka plan rengini değiştirin:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

Kişisel olarak deneyin

Örnek 6

removeEventListener() yöntemini kullanarak:

// Olay dinleyicisini ekleyin
document.addEventListener("mousemove", myFunction);
// Olay dinleyicisini kaldırma
document.removeEventListener("mousemove", myFunction);

Kişisel olarak deneyin

Sözdizimi

document.addEventListener(type, function, capture)

Parametreler

Parametreler Açıklama
type

Gerekli. Olay adı.

"on" öneki kullanmayın.

"click" yerine "onclick" kullanmayın.

Bütün HTML DOM olayları aşağıda listelenmiştir:

HTML DOM Event Kütüphanesi
function

Gerekli. Olay meydana geldiğinde çalıştırılan fonksiyon.

Olay meydana geldiğinde, olay nesnesi fonksiyona ilk parametre olarak geçirilir.

Olay nesnesinin türü belirtilen olaya bağlıdır. Örneğin, "click" olayı MouseEvent nesnesine aittir.
capture

Opsiyonel (varsayılan = false).

  • true - İşleyici yakalama aşamasında çalışır
  • false - İşleyici balonlama aşamasında çalışır

Dönüş Değeri

Yok.

Teknik Ayrıntılar

Belirtilen olay türü type için mevcut düğümdeki dinleyici koleksiyonuna belirtilen olay dinleyici fonksiyonunu ekler ve belirtilen olay türü type için olayları işler. Eğer capture true olarak ayarlanırsa, dinleyici yakalama olay dinleyicisi olarak kaydedilir. Eğer capture false olarak ayarlanırsa, normal olay dinleyicisi olarak kaydedilir.

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

Eğer bir olay dinleyici fonksiyonu aynı düğümde aynı type ve capture parametre iki kez kaydedildiysen, ikinci kayıt göz ardı edilir. Bir düğüm üzerinde olayı işlerken, bu düğümde yeni bir olay dinleyicisi kaydedilirse, bu olay için yeni olay dinleyicisi çağrılmaz.

Eğer Node.cloneNode() Metod veya Document.importNode() Metod bir Document düğümünü kopyalarken, orijinal düğümde kayıtlı olay dinleyicilerini kopyalamaz.

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

Tarayıcı Desteği

document.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 Metodları

addEventListener() Metodu

removeEventListener() Metodu

Belge Metodları

addEventListener() Metodu

removeEventListener() Metodu

Eğitim

HTML DOM EventListener

Tam DOM Olay Listesi