Methode dispatchEvent

Die Methode dispatchEvent ermöglicht es, ein Ereignis auf einem Element zu simulieren. Wozu das nützlich ist: Man kann einen Klick des Benutzers auf einen Button, den Versuch des Absendens eines Formulars und so weiter simulieren. Dabei unterscheidet sich das Ereignis von einem echten durch nichts, außer durch die Eigenschaft event.isTrusted. Man kann sogar Ereignisse mit nicht-standardisierten (von Ihnen erdachten) Namen erstellen und sie dann im gewünschten Moment auslösen. Die Methode wird auf dem Element angewendet, auf dem das Ereignis ausgelöst werden soll. Als Parameter erhält die Methode das Ereignis (Objekt), das mit dem Konstruktor new Event erstellt wurde.

Syntax

element.dispatchEvent(event);

Beispiel

Nehmen wir an, wir haben einen Button. Beim Klick auf diesen Button wird eine Nachricht ausgegeben. Lassen Sie uns Folgendes erreichen: Wenn die Maus über den Button fährt, soll dieser Button denken, dass er angeklickt wurde:

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

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

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

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // Ereignis erstellen
	this.dispatchEvent(clickEvent); // Klick auf den Button simulieren
});

Beispiel

Man kann eigene Ereignisse (mit eigenem Namen) erstellen und sie dann im gewünschten Moment auslösen. Lassen Sie uns an den Button das Ereignis showMessage binden und beim Überfahren mit der Maus dieses Ereignis initialisieren:

<button id="button">Button</button>

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

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

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // Ereignis erstellen
	this.dispatchEvent(showMessageEvent); // Auslösen des Ereignisses aufrufen
});