De new Event Opdracht

De opdracht new Event is een constructor voor gebeurtenissen, waarmee men een gebeurtenisobject kan creëren, en deze gebeurtenis vervolgens vanuit JavaScript kan activeren met behulp van de methode dispatchEvent. Waarom dit nuttig is: men kan een gebruikersklik op een knop nabootsen, een poging tot het verzenden van een formulier, enzovoort. Deze gebeurtenis zal niet verschillen van een echte, behalve in de eigenschap event.isTrusted. Men kan zelfs gebeurtenissen creëren met niet-standaard (verzonnen) namen en deze vervolgens op het juiste moment activeren.

Syntaxis

new Event(gebeurtenistype, [flags]);

Voorbeeld

Stel we hebben een knop. Wanneer 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 geklikt is:

<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'); // creëer de gebeurtenis
	this.dispatchEvent(clickEvent); // bootst een klik op de knop na
});

Voorbeeld

Men kan eigen gebeurtenissen (met een eigen naam) creëren en deze vervolgens op het juiste moment activeren. Laten we een gebeurtenis showMessage aan de knop binden en bij het muisover de gebeurtenis initialiseren:

<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'); // creëer de gebeurtenis
	this.dispatchEvent(showMessageEvent); // activeert de gebeurtenis
});

Zie ook

de eigenschap addEventListener,
die gebeurtenissen bindt
de eigenschap removeEventListener,
die gebeurtenissen ontbindt