JavaScript HTML DOM Event Luisteraars

addEventListener() methode

Voorbeeld

Voeg een eventluisteraar toe die wordt geactiveerd wanneer de gebruiker op de knop klikt:

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

Probeer het zelf

addEventListener() De methode specificeert een eventbehandelaar voor een specifiek element.

addEventListener() De methode voegt een eventbehandelaar toe aan een element zonder bestaande eventbehandelaars te overschrijven.

Je kunt meerdere eventbehandelaars toevoegen aan een element.

您能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。

您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。

您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

向元素添加事件处理程序

Voorbeeld

当用户点击某个元素时提示 "Hello World!"：

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

Probeer het zelf

您也可以引用外部“命名”函数：

Voorbeeld

当用户点击某个元素时提示 "Hello World!"：

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

Probeer het zelf

向相同元素添加多个事件处理程序

addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：

Voorbeeld

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

Probeer het zelf

您能够向相同元素添加不同类型的事件：

Voorbeeld

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

Probeer het zelf

向 Window 对象添加事件处理程序

addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。

Voorbeeld

添加当用户调整窗口大小时触发的事件监听器：

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

Probeer het zelf

Pass parameters

When passing parameter values, use the "anonymous function" in the form of parameters to call the specified function:

Voorbeeld

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

Probeer het zelf

Event bubbling or event capturing?

There are two methods of event propagation in HTML DOM: bubbling and capturing.

Event propagation is a method that defines the order of elements when an event occurs. If there is a <p> element inside a <div>, and the user clicks on this <p> element, which element's "click" event should be handled first?

In bubbling, the event of the innermost element is processed first, followed by the outer ones: first handle the click event of the <p> element, then the click event of the <div> element.

In capturing, the event of the outermost element is processed first, followed by the inner ones: first handle the click event of the <div> element, then the click event of the <p> element.

In the addEventListener() method, you can specify the propagation type by using the "useCapture" parameter:

addEventListener(event, function, useCapture);

The default value is falseit will use bubbling propagation, if the value is set to trueIf this value is set to

Voorbeeld

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

Probeer het zelf

removeEventListener() method

removeEventListener() The method will remove the event handler that was added via addEventListener() Event handlers attached to the method:

Voorbeeld

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

Probeer het zelf

Browser support

The numbers in the table specify the first browser version that fully supports these methods.

Method
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Note:IE 8, Opera 6.0 and earlier versions do not support addEventListener() and removeEventListener() Method. However, for these special browser versions, you can use attachEvent()} Method toevoegen van een eventhandler aan een element, en detachEvent() Method verwijderen:

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

Voorbeeld

Crossbrowser-oplossing:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // Voor hoofdstromers, behalve IE 8 en oudere versies
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // Voor IE 8 en oudere versies
    x.attachEvent("onclick", myFunction);
}

Probeer het zelf

HTML DOM Event-object referentiemanual

Voor een volledige lijst van alle HTML DOM-gebeurtenissen, bezoek onze volledige HTML DOM Event-object referentiemanual.