HTML DOM-element addEventListener()
Voorbeelden
Een klikgebeurtenis toevoegen aan een <button>-element:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Meer compacte code:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
Hieronder meer voorbeelden.
Definitie en gebruik
De addEventListener()
methode koppelt een gebeurtenishandler aan het element.
Zie ook:
De methode element.removeEventListener()
De document.addEventListener()-methode
De methode document.removeEventListener()
Tutorials
Syntaxis
element.addEventListener(event, function, useCapture)
Parameters:
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.
|
Winstwaarde
GEEN |
Meer voorbeelden
U kunt veel gebeurtenissen aan hetzelfde element toevoegen:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
U kunt verschillende gebeurtenissen aan hetzelfde element toevoegen:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
Gebruik een "anonieme functie" om parameterwaarden door te geven:
element.addEventListener("click", function() {
myFunction(p1, p2);
});
Verander de achtergrondkleur van een <button> element:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
Het verschil tussen bubbelen en vastleggen:
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
Een gebeurtenishandler verwijderen:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
Browserondersteuning
element.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 |