dispatchEvent-metodi

Metodi dispatchEvent mahdollistaa tapahtuman simuloinnin elementillä. Miksi tämä on hyödyllistä: voidaan simuloida käyttäjän painikkeen painamista, lomakkeen lähetysyritystä ja niin edelleen. Tällöin tapahtuma ei eroa aidosta millään tavalla paitsi ominaisuudella event.isTrusted. Voidaan jopa luoda tapahtumia epästandardeilla (itsesi keksimillä) nimillä ja sitten kutsua niitä oikeaan hetkeen. Metodia sovelletaan elementtiin, jolle tapahtuma halutaan kutsua. Parametrina metodi saa tapahtuman (objektin), joka on luotu konstruktorilla new Event.

Syntaksi

elementti.dispatchEvent(tapahtuma);

Esimerkki

Oletetaan, että meillä on painike. Kun tätä painiketta painetaan, näytetään viesti. Tehdään niin, että kun hiiri viedään painikkeen päälle tämä painike luulee, että sitä on klikattu:

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

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

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

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // luodaan tapahtuma
	this.dispatchEvent(clickEvent); // simuloidaan klikkausta painikkeella
});

Esimerkki

Voit luoda omia tapahtumia (omilla nimillään) ja sitten kutsua niitä oikeaan hetkeen. Liitetään painikkeelle tapahtuma showMessage ja hiiren viemisellä päälle laukaistaan tämä tapahtuma:

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

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

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

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // luodaan tapahtuma
	this.dispatchEvent(showMessageEvent); // kutsutaan tapahtuman laukeamista
});