Método dispatchEvent

El método dispatchEvent permite simular un evento en un elemento. Para qué sirve: se puede simular la pulsación de un usuario en un botón, el intento de envío de un formulario, etc. Además, el evento no se diferenciará de uno real en nada excepto en la propiedad event.isTrusted. Incluso se pueden crear eventos con nombres no estándar (inventados por ti) y luego activarlos en el momento adecuado. El método se aplica al elemento en el que se desea activar el evento. Como parámetro, el método recibe el evento (objeto), creado mediante el constructor new Event.

Sintaxis

elemento.dispatchEvent(evento);

Ejemplo

Supongamos que tenemos un botón. Al hacer clic en este botón se muestra un mensaje. Hagamos que al pasar el cursor del ratón sobre el botón, este botón piense que se ha hecho clic en él:

<button id="button">botón</button>

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

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

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // creamos el evento
	this.dispatchEvent(clickEvent); // simulamos el clic en el botón
});

Ejemplo

Se pueden crear eventos propios (con nombre propio) y luego activarlos en el momento adecuado. Asociemos al botón el evento showMessage y al pasar el cursor del ratón, inicialicemos este evento:

<button id="button">botón</button>

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

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

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // creamos el evento
	this.dispatchEvent(showMessageEvent); // activamos la ejecución del evento
});