HTML DOM-document addEventListener()
Voorbeelden
Voeg een klikgebeurtenis toe aan het document:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Eenvoudigere syntaxis:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
Hieronder meer voorbeelden.
Definitie en gebruik
De addEventListener()
methode koppelt een gebeurtenishandler aan het document.
Zie ook:
De HTML DOM EventListener-zelfstudie
De methode Document removeEventListener()
Syntaxis
document.addEventListener(event, function, useCapture)
Parameters:
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.
|
Winstwaarde
NONE |
Meer voorbeelden
U kunt veel gebeurtenislisteners aan het document toevoegen:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
U kunt verschillende soorten evenementen toevoegen:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Gebruik bij het doorgeven van parameters een "anonieme functie" om een functie aan te roepen met de parameters:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Wijzig de achtergrondkleur van het document:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
De methode removeEventListener() gebruiken:
// Add an event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);
Browserondersteuning
document.addEventListener
is een DOM Level 2 (2001)-functie.
Het wordt volledig ondersteund in alle browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |