HTML DOM Belgesi addEventListener()
Örnekler
Belgeye bir tıklama olayı ekleyin:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Daha basit sözdizimi:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
Aşağıda daha fazla örnek.
Tanım ve Kullanım
Yöntem addEventListener()
, belgeye bir olay işleyicisi ekler.
Ayrıca bakınız:
HTML DOM EventListener Eğitimi
Belge removeEventListener() Yöntemi
Sözdizimi
document.addEventListener(event, function, useCapture)
parametreler
Parameter | Description |
event | Required. The event name. Do not use the "on" prefix. For example, use "click" instead of "onclick". HTML DOM events are listed in Complete HTML DOM Event Object Reference. |
function | Required. The function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. |
useCapture |
Optional. A boolean. Specifies if the event should be executed in the capturing or in the bubbling phase (default). true - The event handler is executed in the capturing phase.false - The event handler is executed in the bubbling phase.
|
Geri dönüş değeri
NONE |
Daha fazla örnek
Belgeye birçok olay dinleyicisi ekleyebilirsiniz:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
Farklı etkinlik türleri ekleyebilirsiniz:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Parametreleri iletirken, parametrelerle bir işlevi çağırmak için bir "anonim işlev" kullanın:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Belgenin arka plan rengini değiştirin:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
removeEventListener() yöntemini kullanarak:
// Add an event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);
Tarayıcı Desteği
document.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 |