De addEventListener-methode

De methode addEventListener maakt het mogelijk om op een element gebeurtenisafhandelaars toe te wijzen. Met behulp daarvan kan men bijvoorbeeld aangeven wat er moet gebeuren bij een klik op een knop of wat er moet gebeuren bij het typen van tekst in een tekstveld. In de eerste parameter specificeren we het type gebeurtenis, in de tweede - de functie die zal worden uitgevoerd na de gebeurtenis, gespecificeerd in de eerste parameter. In de derde optionele parameter geven we de kenmerken van het object door (once, capture, passive) of de parameter useCapture.

Syntaxis

element.addEventListener('gebeurtenistype', functie, [objectkenmerken]);
of
element.addEventListener('gebeurtenistype', functie, [useCapture]);

Voorbeeld

Laten we ervoor zorgen dat er een bericht wordt weergegeven bij een klik op de knop:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('message');
});

Voorbeeld

Laten we code schrijven zodat wanneer de focus in de input verloren gaat, er een bericht wordt weergegeven met de tekst van deze input:

<input id="input" value="text">

let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	alert(this.value);
});

Voorbeeld

Laten we ervoor zorgen dat bij een klik op de knop het bericht slechts één keer naar de console wordt uitgevoerd. Hiervoor maken we gebruik van de tweede parameter:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function() {
		console.log('message');
	},
	{
		once: true
	}
);

Voorbeeld

De parameter passive verbiedt het aanroepen van de methode event.preventDefault tijdens de verwerking van de gebeurtenis. Laten we op het vorige voorbeeld de methode event.preventDefault toepassen, en ook in de parameter passive de waarde true specificeren:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('No message');
	},
	{
		passive: true
	}
);

Na het uitvoeren van de code zullen we de volgende berichten zien:

'No message';
'Unable to preventDefault inside passive event listener invocation.'

Voorbeeld

De parameter useCapture met de waarde true toont het omhoog borrelen (bubbling) van gebeurtenissen van het innerlijke element naar het outerlijke, bij de waarde false - van het outerlijke naar het innerlijke element. Bij het doorgeven van de parameter useCapture wordt de naam weggelaten en simpelweg true of false genoteerd. Laten we kijken hoe gebeurtenissen omhoog borrelen in het bovenliggende en onderliggende elementen bij een klik erop:

<div id="parent">Parent
	<p id="child">Child</p>
</div>

#parent{
	width: 60px;
	padding: 10px;
	border: 1px solid red;
	text-align: center;
}
#child{
	width: 60px;
	marging-right: 40px;
	border: 1px solid blue;
	text-align: center;
}

let parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
	() => alert('parent'), 
	true
);
child.addEventListener('click',
	() => alert('child'), 
	true
);

Zie ook

de methode removeEventListener,
die een gebeurtenis van een element loskoppelt