Metoden dispatchEvent

Metoden dispatchEvent låter dig simulera en händelse på ett element. Varför detta är användbart: man kan simulera en användares tryck på en knapp, ett försök att skicka ett formulär och så vidare. Händelsen kommer inte att skilja sig från en äkta händelse förutom genom egenskapen event.isTrusted. Man kan till och med skapa händelser med icke-standardiserade (av dig hittade på) namn och sedan utlösa dem vid rätt tillfälle. Metoden appliceras på elementet där händelsen ska utlösas. I parametern tar metoden emot en händelse (ett objekt), skapat med konstruktorn new Event.

Syntax

element.dispatchEvent(event);

Exempel

Låt oss säga att vi har en knapp. När man trycker på denna knapp visas ett meddelande. Låt oss göra så att när musen förs över knappen så tror knappen att den blev klickad:

<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'); // skapar händelsen
	this.dispatchEvent(clickEvent); // simulerar klick på knappen
});

Exempel

Man kan skapa egna händelser (med sitt eget namn) och sedan utlösa dem vid rätt tillfälle. Låt oss binda en händelse showMessage till knappen och vid mushovring initiera denna händelse:

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

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

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

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // skapar händelsen
	this.dispatchEvent(showMessageEvent); // utlöser händelsen
});