Methode dispatchEvent

De methode dispatchEvent maakt het mogelijk om een gebeurtenis op een element te simuleren. Waarom is dit nodig: je kunt simuleren dat een gebruiker op een knop klikt, een formulier probeert te verzenden, enzovoort. De gebeurtenis zal niet verschillen van een echte, behalve in de eigenschap event.isTrusted. Je kunt zelfs gebeurtenissen maken met niet-standaard (verzonnen) namen en deze vervolgens op het gewenste moment activeren. De methode wordt toegepast op het element waarop de gebeurtenis moet worden geactiveerd. Als parameter krijgt de methode een gebeurtenis (object) ontvangen, gemaakt met de constructor new Event.

Syntaxis

element.dispatchEvent(event);

Voorbeeld

Stel we hebben een knop. Wanneer er op deze knop wordt geklikt, wordt een bericht weergegeven. Laten we ervoor zorgen dat wanneer met de muis over de knop wordt bewogen, de knop denkt dat er op is geklikt:

<button id="button">knop</button>

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

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

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // maak een gebeurtenis
	this.dispatchEvent(clickEvent); // simuleer een klik op de knop
});

Voorbeeld

Je kunt je eigen gebeurtenissen maken (met een eigen naam) en deze later op het gewenste moment activeren. Laten we een gebeurtenis showMessage aan de knop binden en deze activeren wanneer met de muis over de knop wordt bewogen:

<button id="button">knop</button>

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

button.addEventListener('showMessage', function() {
	alert('bericht');
});

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // maak een gebeurtenis
	this.dispatchEvent(showMessageEvent); // activeer de gebeurtenis
});