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

javascriptnew 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:

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

javascriptlet 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:

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

javascriptlet 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