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

javascriptelemento.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:

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

javascriptlet 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:

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

javascriptlet 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
});

Результат: