HTML DOM Document addEventListener() method
- Vorige pagina activeElement
- Volgende pagina adoptNode()
- Terug naar de vorige pagina HTML DOM Documents
Definitie en gebruik
addEventListener() De methode voegt een eventhandler toe aan het document.
Voorbeeld
Voorbeeld 1
Voeg een click-gebeurtenis toe aan het document:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Een eenvoudiger syntax:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
Voorbeeld 2
Je kunt meerdere event listeners toevoegen aan het document:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
Voorbeeld 3
Je kunt verschillende soorten gebeurtenissen toevoegen:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Voorbeeld 4
Gebruik een "anonieme functie" om parameters door te geven aan een functie met parameters bij het overdragen van parameters:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Voorbeeld 5
Verander de achtergrondkleur van het document:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Voorbeeld 6
Gebruik de removeEventListener() methode:
// Voeg een event listener toe
document.addEventListener("mousemove", myFunction);
// Verwijder eventueel een event listener
document.removeEventListener("mousemove", myFunction);
Syntax
document.addEventListener(type, function, capture)
Parameters
| Parameters | Beschrijving |
|---|---|
| type |
Verplicht. Naam van de gebeurtenis. Gebruik geen "on"-voorvoegsel. Gebruik "click" in plaats van "onclick". Alle HTML DOM gebeurtenissen worden vermeld in: |
| function |
Verplicht. Functie die wordt uitgevoerd bij het optreden van een gebeurtenis. Bij het optreden van een event, wordt het event object als eerste parameter doorgegeven aan de functie. Het type van het event object hangt af van het specifieke event. Bijvoorbeeld, de "click" event behoort tot het MouseEvent object. |
| capture |
Optioneel (standaard = false).
|
Retourwaarde
Geen.
Technische Details
Deze methode voegt de opgegeven event listener functie toe aan de listener set van het huidige node om de specifieke type events te verwerken. Als capture als true, wordt de listener geregistreerd als een capture event listener. Als capture als false, wordt het geregistreerd als een algemene event listener.
addEventListener() kan meerdere keren worden aangeroepen, meerdere event handlers van hetzelfde type kunnen worden geregistreerd op dezelfde node. Maar let op, DOM kan niet bepalen in welke volgorde meerdere event handlers worden aangeroepen.
Als een event listener functie op dezelfde node met dezelfde type en capture parameters worden geregistreerd, wordt de tweede registratie genegeerd. Als een nieuw event listener wordt geregistreerd op een node terwijl een event wordt verwerkt, wordt de nieuwe event listener niet voor dat event aangeroepen.
Als Node.cloneNode() Method of Document.importNode() Deze methode kopieert een Document-node, maar kopieert geen event listeners die voor de oorspronkelijke node zijn geregistreerd.
Deze methode is ook gedefinieerd op Document- en Window-objecten en werkt op dezelfde manier.
Browser Ondersteuning
document.addEventListener is een DOM Level 2 (2001) kenmerk.
Alle browsers ondersteunen het volledig:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Ondersteuning | 9-11 | Ondersteuning | Ondersteuning | Ondersteuning | Ondersteuning |
Gerelateerde Pagina's
Element Methoden
Document Methoden
Tutorial
- Vorige pagina activeElement
- Volgende pagina adoptNode()
- Terug naar de vorige pagina HTML DOM Documents
