Metodo dispatchEvent

Il metodo dispatchEvent permette di simulare un evento su un elemento. A cosa serve: si può simulare la pressione di un utente su un pulsante, il tentativo di invio di un modulo e così via. In questo caso l'evento non si differenzierà da uno reale per nient'altro che la proprietà event.isTrusted. Si possono persino creare eventi con nomi non standard (inventati da voi) e poi richiamarli al momento giusto. Il metodo viene applicato all'elemento su cui si vuole richiamare l'evento. Come parametro il metodo riceve l'evento (oggetto), creato tramite il costruttore new Event.

Sintassi

elemento.dispatchEvent(event);

Esempio

Supponiamo di avere un pulsante. Alla pressione di questo pulsante viene visualizzato un messaggio. Facciamo in modo che quando il mouse passa sopra il pulsante questo pensi di essere stato cliccato:

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

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

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

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // creiamo l'evento
	this.dispatchEvent(clickEvent); // simuliamo il click sul pulsante
});

Esempio

Si possono creare i propri eventi (con un nome personalizzato) e poi richiamarli al momento giusto. Associamo al pulsante l'evento showMessage e al passaggio del mouse sopra inizializziamo questo evento:

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

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

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

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // creiamo l'evento
	this.dispatchEvent(showMessageEvent); // richiamiamo l'attivazione dell'evento
});