HTML DOM Öğesi addEventListener()
Örnekler
Bir <button> öğesine bir tıklama olayı ekleyin:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Daha kompakt kod:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
Aşağıda daha fazla örnek.
Tanım ve Kullanım
Yöntem addEventListener()
, öğeye bir olay işleyicisi ekler.
Ayrıca bakınız:
element.removeEventListener() Yöntemi
Document.addEventListener() Yöntemi
Document.removeEventListener() Yöntemi
öğreticiler
Sözdizimi
element.addEventListener(event, function, useCapture)
parametreler
Parameter | Description |
event | Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events. |
function | Required. The function to run when the event occurs. |
useCapture |
Optional (default = false).false - The handler is executed in the bubbling phase.true - The handler is executed in the capturing phase.
|
Geri dönüş değeri
YOK |
Daha fazla örnek
Aynı öğeye birçok olay ekleyebilirsiniz:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
Aynı öğeye farklı etkinlikler ekleyebilirsiniz:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
Parametre değerlerini iletmek için bir "anonim işlev" kullanın:
element.addEventListener("click", function() {
myFunction(p1, p2);
});
Bir <button> öğesinin arka plan rengini değiştirin:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
Köpürme ve yakalama arasındaki fark:
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
Bir olay işleyicisini kaldırın:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
Tarayıcı Desteği
element.addEventListener()
bir DOM Düzey 2 (2001) özelliğidir.
Tüm tarayıcılarda tam olarak desteklenir:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |