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

javascriptelement.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:

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'); // 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:

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'); // maak een gebeurtenis
  this.dispatchEvent(showMessageEvent); // activeer de gebeurtenis
});

Результат: