En son web geliştirme öğreticiler
 

JavaScript HTML DOM EventListener

❮ Önceki Sonraki Bölüm ❯

addEventListener() metodu

Örnek

Bir kullanıcı bir düğmeye tıkladığında patlar bir olay dinleyicisi ekleyin:

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

addEventListener() yöntemi, belirtilen elemanına bir olay gidericisini vermektedir.

addEventListener() Yöntem, mevcut olay işleyicileri üzerine olmayan bir öğeye bir olay gidericisini vermektedir.

Tek bir elemana birçok olay işleyicileri ekleyebilirsiniz.

İki yani bir elemana aynı türde birçok olay işleyicileri ekleyebilirsiniz "click" olaylar.

Herhangi DOM nesnesi değil sadece HTML elemanları için olay dinleyicileri ekleyebilir. pencere nesne, yani.

addEventListener() yöntemi daha kolay olay köpüren nasıl tepki kontrol etmek için yapar.

Kullanırken addEventListener() yöntemini JavaScript iyi okunabilirlik için, HTML işaretlemesi ayrılır ve HTML biçimlendirmesi kontrol etmiyoruz zaman bile olay dinleyicileri eklemek için olanak tanır.

Kolayca kullanarak bir olay dinleyicisi kaldırabilir removeEventListener() yöntemini.

Sözdizimi

element .addEventListener( event, function, useCapture );

İlk parametre olayın türüdür (like "click" or "mousedown" ) .

İkinci parametre olay meydana geldiğinde aramak istediğiniz işlevidir.

Üçüncü parametre olay köpüren veya olay yakalama kullanımı olmadığını belirten bir mantıksal değerdir. Bu parametre, isteğe bağlıdır.

Kullanmak unutmayın "on" olayı için önek; kullanmak "click" yerine "onclick" .

Bir Unsuru Bir Olay işleyicisi Ekle

Örnek

Uyarı "Hello World!" bir öğenin üzerine tıkladığında:

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

Ayrıca, harici başvurabilir "named" fonksiyonu:

Örnek

Uyarı "Hello World!" bir öğenin üzerine tıkladığında:

element .addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}
Kendin dene "

Aynı Element Birçok olay işleyicileri ekleyin

addEventListener() yöntemi, varolan olayları üzerine yazmadan, aynı elemana birçok etkinlik eklemek sağlar:

Örnek

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

Aynı elemana farklı türde olayları ekleyebilirsiniz:

Örnek

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

Pencere bir nesne için bir olay işleyicisi ekleyin

addEventListener() yöntemi, böyle gibi etkinliklere destek HTML öğeleri, HTML dokümanının, pencere nesnelere veya diğer nesneler gibi herhangi bir HTML DOM nesne üzerinde olay dinleyicileri eklemenize izin verir xmlHttpRequest nesnesi.

Örnek

Bir kullanıcı pencerenin boyutlarını patlar bir olay dinleyicisi ekleyin:

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

Parametreler geçme

Parametre değerleri geçerken, bir kullanma "anonymous function" parametrelerle belirtilen işlevini çağırır:

Örnek

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

Olay Fokurdama veya Etkinlik Yakalama?

fokurdayan ve yakalama HTML DOM olay yayılımı iki yolu vardır.

Olay yayılma bir olay gerçekleştiğinde elemanı düzeni tanımlayan bir yöntemdir. Eğer bir varsa <p> Bir iç elemanı <div> elemanı ve kullanıcı tıkladığında <p> elemanı en eleman, "click" olayı ilk ele alınmalıdır?

: Fokurdayan yılında iç en öğenin olay ilk ve daha sonra dış işlenir <p> öğesinin tıklama etkinlik, ilk olarak ele alınır, sonra <div> öğesinin tıklama olayı.

Yakalama yılında dış çoğu elementin olay ilk ve daha sonra iç işlenir: <div> öğesinin tıklama etkinlik, ilk olarak daha sonra ele alınacak <p> öğesinin tıklama olayı.

Ile addEventListener() yöntemiyle Eğer kullanarak yayılma türü belirtebilir "useCapture" parametresini:

addEventListener( event , function , useCapture );

Varsayılan değer doğru olarak ayarlandığında, fokurdayan yayılmasını kullanacağı, yanlıştır, olay yakalama yayılması kullanır.

Örnek

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

removeEventListener() metodu

removeEventListener() metodu ile bağlı olan bir olay işleyicileri kaldırır addEventListener() yöntemi:

Örnek

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

Tarayıcı Desteği

Tablodaki rakamlar tam bu yöntemleri destekler ilk tarayıcı sürümü belirtir.

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

Not: addEventListener() ve removeEventListener() yöntemleri IE 8 ve önceki sürümlerinde ve desteklenmeyen Opera 6.0 ve önceki sürümlerde. Ancak, bu özel tarayıcı sürümleri, kullanabileceğiniz attachEvent() öğeye bir olay işleyicileri eklemek yöntemini ve detachEvent() metodu çıkarmak için:

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

Örnek

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

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // For all major browsers, except IE 8 and earlier
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // For IE 8 and earlier versions
    x.attachEvent("onclick", myFunction);
}
Kendin dene "

HTML DOM Olay Nesne Referans

Tüm HTML DOM Olaylar listesi için lütfen tüm bakmak HTML DOM Olay Nesne Referans .


❮ Önceki Sonraki Bölüm ❯