JavaScript HTML DOM EventListener
De methode addEventListener()
Voorbeeld
Voeg een gebeurtenislistener toe die wordt geactiveerd wanneer een gebruiker op een knop klikt:
document.getElementById("myBtn").addEventListener("click", displayDate);
De addEventListener()methode koppelt een gebeurtenishandler aan het opgegeven element.
De addEventListener()methode koppelt een event-handler aan een element zonder bestaande event-handlers te overschrijven.
U kunt veel gebeurtenishandlers aan één element toevoegen.
U kunt veel event handlers van hetzelfde type toevoegen aan één element, dwz twee "click" events.
U kunt gebeurtenislisteners aan elk DOM-object toevoegen, niet alleen HTML-elementen. dwz het vensterobject.
De addEventListener()methode maakt het gemakkelijker om te bepalen hoe de gebeurtenis reageert op borrelen.
Wanneer u de addEventListener()methode gebruikt, wordt het JavaScript gescheiden van de HTML-opmaak, voor een betere leesbaarheid en kunt u gebeurtenislisteners toevoegen, zelfs als u de HTML-opmaak niet beheert.
U kunt een gebeurtenislistener eenvoudig verwijderen met behulp van de removeEventListener()methode.
Syntaxis
element.addEventListener(event, function, useCapture);
De eerste parameter is het type gebeurtenis (zoals " click" of " mousedown" of een ander HTML DOM-gebeurtenis .)
De tweede parameter is de functie die we willen aanroepen wanneer de gebeurtenis plaatsvindt.
De derde parameter is een booleaanse waarde die aangeeft of gebeurtenisborrelen of het vastleggen van gebeurtenissen moet worden gebruikt. Deze parameter is optioneel.
Merk op dat je het voorvoegsel "aan" niet gebruikt voor de gebeurtenis; gebruik " click" in plaats van " onclick".
Een gebeurtenishandler aan een element toevoegen
Voorbeeld
Melding "Hallo wereld!" wanneer de gebruiker op een element klikt:
element.addEventListener("click", function(){ alert("Hello World!"); });
U kunt ook verwijzen naar een externe "benoemde" functie:
Voorbeeld
Melding "Hallo wereld!" wanneer de gebruiker op een element klikt:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Voeg veel gebeurtenishandlers toe aan hetzelfde element
Met de addEventListener()methode kunt u veel gebeurtenissen aan hetzelfde element toevoegen, zonder bestaande gebeurtenissen te overschrijven:
Voorbeeld
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
U kunt gebeurtenissen van verschillende typen toevoegen aan hetzelfde element:
Voorbeeld
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Voeg een gebeurtenishandler toe aan het venster Object
Met de addEventListener()methode kunt u gebeurtenislisteners toevoegen aan elk HTML DOM-object, zoals HTML-elementen, het HTML-document, het vensterobject of andere objecten die gebeurtenissen ondersteunen, zoals het xmlHttpRequestobject.
Voorbeeld
Voeg een gebeurtenislistener toe die wordt geactiveerd wanneer een gebruiker het formaat van het venster wijzigt:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Parameters doorgeven
Gebruik bij het doorgeven van parameterwaarden een "anonieme functie" die de opgegeven functie aanroept met de parameters:
Voorbeeld
element.addEventListener("click", function(){ myFunction(p1, p2); });
Event Bubbling of Event Capturing?
Er zijn twee manieren om gebeurtenissen in de HTML DOM te verspreiden: bubbelen en vastleggen.
Gebeurtenisvoortplanting is een manier om de volgorde van de elementen te definiëren wanneer een gebeurtenis plaatsvindt. Als u een <p>-element in een <div>-element hebt en de gebruiker klikt op het <p>-element, van welk element moet dan eerst de "klik"-gebeurtenis worden afgehandeld?
Bij bubbling wordt eerst de gebeurtenis van het binnenste element afgehandeld en daarna de buitenste: eerst wordt de klikgebeurtenis van het <p>-element afgehandeld en daarna de klikgebeurtenis van het <div>-element.
Bij het vastleggen wordt eerst de gebeurtenis van het buitenste element afgehandeld en daarna de binnenste: de klikgebeurtenis van het <div>-element wordt eerst afgehandeld, daarna de klikgebeurtenis van het <p>-element.
Met de methode addEventListener() kunt u het type propagatie specificeren door de parameter "useCapture" te gebruiken:
addEventListener(event, function, useCapture);
De standaardwaarde is false, waarbij de bubbelpropagatie wordt gebruikt. Wanneer de waarde is ingesteld op true, gebruikt de gebeurtenis de capture-propagatie.
Voorbeeld
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
De methode removeEventListener()
De removeEventListener()methode verwijdert gebeurtenishandlers die zijn gekoppeld met de methode addEventListener() :
Voorbeeld
element.removeEventListener("mousemove", myFunction);
HTML DOM-gebeurtenisobjectreferentie
Bekijk onze volledige HTML DOM Event Object Reference voor een lijst met alle HTML DOM-gebeurtenissen .