El método dispatchEvent

Ahora que ya conocemos la propagación de eventos y la existencia de los eventos personalizados, nos falta conocer cómo integrarlos en nuestro código y emitirlos para comunicarnos con otras partes de la aplicación.

¿Cómo emitir eventos?

Para emitir eventos en Javascript, lo primero (y obvio) es que necesitaremos crear un evento. Para ello, hay que crear un objeto que represente el evento. Existen dos posibilidades:

• 1️⃣ Usar new Event() y crear un evento genérico. Útil para simular eventos del navegador.
• 2️⃣ Usar new CustomEvent() y crear un evento personalizado. Ideal para nuestros propios eventos.

Elegimos el que más nos interese y lo creamos en una variable.

La función dispatchEvent

Una vez creado el evento, podremos emitirlo a lo largo del DOM de la página utilizando el método dispatchEvent() del elemento HTML a donde lo queremos enviar. Esto disparará el evento a través de todo el DOM como vimos en el tema de propagación de eventos. Si no conoces este tema, revísalo antes de continuar, puesto que es muy importante.

Nuestro código quedaría como algo similar a lo siguiente:

const element = document.querySelector(".element");
const event = new CustomEvent("test-event");          // Creamos evento
element.dispatchEvent(event);                         // Disparamos evento

• 1️⃣ Localizamos el elemento objetivo a donde queremos disparar el evento.
• 2️⃣ Creamos el evento correspondiente (genérico o personalizado).
• 3️⃣ Emitimos el evento hacia el elemento HTML del DOM que localizamos antes.
• 4️⃣ El evento se propagará desde el raíz hasta ese elemento y volverá al raíz.
• 5️⃣ Podremos capturar el evento en cualquier elemento desde el raíz hasta el localizado.

Ten en cuenta que en este caso, no hemos definido objeto de opciones del CustomEvent, por lo que:

• 🟥 No definimos detail, el evento no tiene información guardada.
• 🟥 No definimos bubbles, el evento no se propaga, sólo se dispara en el propio elemento.
• 🟥 No definimos composed, el evento se detiene en el Shadow DOM, no puede atravesarlo.
• 🟥 No definimos cancelable, el evento no se puede cancelar con .preventDefault().