Metoden dispatchEvent

Metoden dispatchEvent gør det muligt at efterligne en hændelse på et element. Hvorfor er dette nyttigt: man kan efterligne et brugerklik på en knap, et forsøg på at indsende en formular og så videre. I dette tilfælde vil hændelsen ikke adskille sig fra en ægte hændelse, bortset fra egenskaben event.isTrusted. Man kan endda skabe hændelser med ikke-standard (selvopfundne) navne og derefter udløse dem på det ønskede tidspunkt. Metoden anvendes på det element, hvor hændelsen skal udløses. Som parameter tager metoden en hændelse (et objekt), skabt med konstruktøren new Event.

Syntaks

element.dispatchEvent(event);

Eksempel

Lad os sige, at vi har en knap. Når der klikkes på denne knap, vises en besked. Lad os opnå, at når musen føres over knappen, så tror knappen, at der er blevet klikket på den:

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

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

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

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // opretter hændelsen
	this.dispatchEvent(clickEvent); // efterligner klik på knappen
});

Eksempel

Man kan skabe sine egne hændelser (med sit eget navn) og derefter udløse dem på det rigtige tidspunkt. Lad os knytte hændelsen showMessage til knappen og ved mouseover initialisere denne hændelse:

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

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

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

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // opretter hændelsen
	this.dispatchEvent(showMessageEvent); // udløser hændelsen
});