JavaScript HTML DOM EventListener
addEventListener() yöntemi
Örnek
Kullanıcı bir düğmeyi tıkladığında tetiklenen bir olay dinleyicisi ekleyin:
document.getElementById("myBtn").addEventListener("click", displayDate);
Yöntem addEventListener(), belirtilen öğeye bir olay işleyicisi ekler.
Yöntem addEventListener(), mevcut olay işleyicilerinin üzerine yazmadan bir öğeye bir olay işleyicisi ekler.
Bir öğeye birçok olay işleyici ekleyebilirsiniz.
Aynı türden birçok olay işleyiciyi tek bir öğeye, yani iki "tıklama" olayına ekleyebilirsiniz.
Olay dinleyicilerini yalnızca HTML öğelerine değil, herhangi bir DOM nesnesine ekleyebilirsiniz. yani pencere nesnesi.
Yöntem addEventListener(), olayın köpürmeye nasıl tepki vereceğini kontrol etmeyi kolaylaştırır.
Yöntemi kullanırken, addEventListener()daha iyi okunabilirlik için JavaScript HTML işaretlemesinden ayrılır ve HTML işaretlemesini kontrol etmediğinizde bile olay dinleyicileri eklemenize olanak tanır.
removeEventListener()Yöntemi kullanarak bir olay dinleyicisini kolayca kaldırabilirsiniz .
Sözdizimi
element.addEventListener(event, function, useCapture);
İlk parametre, olayın türüdür (" click" veya " mousedown" veya herhangi bir başka HTML DOM Etkinliği gibi ).
İkinci parametre ise olay gerçekleştiğinde çağırmak istediğimiz fonksiyondur.
Üçüncü parametre, olay köpürme mi yoksa olay yakalama mı kullanılacağını belirten bir boole değeridir. Bu parametre isteğe bağlıdır.
Etkinlik için "açık" önekini kullanmadığınızı unutmayın; " click" yerine " " kullanın onclick.
Bir Öğeye Olay İşleyici Ekleme
Örnek
"Merhaba Dünya!" Uyarısı kullanıcı bir öğeye tıkladığında:
element.addEventListener("click", function(){ alert("Hello World!"); });
Ayrıca harici bir "adlandırılmış" işleve de başvurabilirsiniz:
Örnek
"Merhaba Dünya!" Uyarısı kullanıcı bir öğeye tıkladığında:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Aynı Öğeye Birçok Olay İşleyicisi Ekleme
Yöntem addEventListener(), mevcut olayların üzerine yazmadan aynı öğeye birçok olay eklemenize izin verir:
Örnek
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Aynı öğeye farklı türden olaylar ekleyebilirsiniz:
Örnek
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Pencere Nesnesine bir Olay İşleyicisi ekleyin
Yöntem addEventListener(), HTML öğeleri, HTML belgesi, pencere nesnesi veya nesne gibi olayları destekleyen diğer nesneler gibi herhangi bir HTML DOM nesnesine olay dinleyicileri eklemenize olanak tanır xmlHttpRequest.
Örnek
Bir kullanıcı pencereyi yeniden boyutlandırdığında tetiklenen bir olay dinleyicisi ekleyin:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Geçiş Parametreleri
Parametre değerlerini iletirken, parametrelerle belirtilen işlevi çağıran bir "anonim işlev" kullanın:
Örnek
element.addEventListener("click", function(){ myFunction(p1, p2); });
Olay Köpürtme veya Olay Yakalama?
HTML DOM'de olay yaymanın iki yolu vardır, köpürme ve yakalama.
Olay yayılımı, bir olay meydana geldiğinde eleman sırasını tanımlamanın bir yoludur. Bir <div> öğesinin içinde bir <p> öğeniz varsa ve kullanıcı <p> öğesini tıklarsa, önce hangi öğenin "click" olayı ele alınmalıdır?
Köpürmede önce en içteki öğenin olayı, sonra dıştaki olay işlenir: önce <p> öğesinin click olayı, ardından <div> öğesinin click olayı işlenir.
Dıştaki öğenin yakalanmasında önce çoğu öğenin olayı , ardından içteki olay işlenir: önce <div> öğesinin click olayı, ardından <p> öğesinin click olayı işlenir.
addEventListener() yöntemiyle, "useCapture" parametresini kullanarak yayılma türünü belirtebilirsiniz:
addEventListener(event, function, useCapture);
Varsayılan değer false olup, köpüren yayılımı kullanır, değer true olarak ayarlandığında olay yakalama yayılımını kullanır.
Örnek
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener() yöntemi
Yöntem removeEventListener(), addEventListener() yöntemiyle eklenmiş olay işleyicilerini kaldırır:
Örnek
element.removeEventListener("mousemove", myFunction);
HTML DOM Olay Nesnesi Referansı
Tüm HTML DOM olaylarının bir listesi için, eksiksiz HTML DOM Olay Nesnesi Referansımıza bakın .