HTML DOM addEventListener() Method

Definitie en gebruik

addEventListener() Het toevoegen van een evenementenhandler aan een element.

Voorbeeld

Voorbeeld 1

Voeg een click-gebeurtenis toe aan het <button>-element:

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Probeer het zelf

Voorbeeld 2

Stijlvriendelijke code:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

Probeer het zelf

U kunt meer voorbeelden vinden onderin de pagina.

Syntax

element.addEventListener(type, function, useCapture)

Parameters

Parameters Beschrijving
type

Verplicht. De naam van de gebeurtenis.

Gebruik geen "on"-voorvoegsel.

Gebruik "click" in plaats van "onclick".


Volledige lijst van DOM-evenementen
function Verplicht. De functie die wordt uitgevoerd wanneer een gebeurtenis optreedt.
useCapture

Optioneel (standaard = false).

  • false - De handler wordt uitgevoerd tijdens de bubbel-fase.
  • true - De handler wordt uitgevoerd tijdens de capture-fase.

Retourwaarde

Geen.

Technische details

Deze methode voegt de opgegeven event listener functie toe aan de listenerverzameling van de huidige knoop om de opgegeven gebeurtenistype te verwerken. type de gebeurtenissen. useCapture wordt ingesteld op true, dan wordt de listener geregistreerd als een capture event listener. Als useCapture wordt ingesteld op false, wordt het geregistreerd als een algemene event listener. Als

addEventListener() kan meerdere keren worden aangeroepen, meerdere event handlers van hetzelfde type kunnen op dezelfde knoop worden geregistreerd. Maar let op, DOM kan de volgorde waarin meerdere event handlers worden aangeroepen niet bepalen.

wanneer een event listener functie in dezelfde knoop met dezelfde type en useCapture hetzelfde argument twee keer is geregistreerd, wordt de tweede registratie genegeerd. Als er tijdens het verwerken van een gebeurtenis op een knoop een nieuwe event listener wordt geregistreerd, wordt de nieuwe event listener niet aangeroepen voor die gebeurtenis.

wanneer Node.cloneNode() methode of Document.importNode() wanneer een Document-node wordt gekopieerd, worden de event listeners die zijn geregistreerd op de oorspronkelijke node niet gekopieerd.

Deze methode is ook Document en Window worden gedefinieerd op het object en werken op een vergelijkbare manier.

Meer voorbeelden

Voorbeeld 3

U kunt veel gebeurtenissen toevoegen aan hetzelfde element:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

Probeer het zelf

Voorbeeld 4

U kunt verschillende gebeurtenissen toevoegen aan hetzelfde element:

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

Probeer het zelf

Voorbeeld 5

Gebruik een "anonieme functie" om parameterwaarden door te geven:

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

Probeer het zelf

Voorbeeld 6

Verander de achtergrondkleur van het <button> element:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Probeer het zelf

Voorbeeld 7

Het verschil tussen bubbel en vangen:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Probeer het zelf

Voorbeeld 8

Verwijder evenementenhandler:

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

Probeer het zelf

Browserondersteuning

element.addEventListener() is een functie van DOM Level 2 (2001).

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

Elementmethoden:

addEventListener() Methode

removeEventListener() Methode

Documentmethoden:

addEventListener() Methode

removeEventListener() Methode

Handleiding:

HTML DOM EventListener

Volledige lijst van DOM-evenementen