Cómo crear y utilizar Eventos personalizados en JavaScript

Los eventos son una parte fundamental de las aplicaciones web, permiten que las aplicaciones respondan a interacciones del usuario y eventos del sistema. Además de los eventos nativos (click, keydown, load, etc.) se pueden crear de eventos personalizados, lo cuales son útiles para comunicar cambios de estado y otras acciones entre diferentes partes de una aplicación.

Eventos Personalizados

Un evento personalizado es un evento definido por el desarrollador que puede ser desencadenado en cualquier momento y escuchado por otros elementos del código.

Los eventos personalizados se usan para:

Comunicación entre Componentes: Los eventos personalizados facilitan la comunicación entre diferentes componentes sin acoplarlos directamente.
Notificación de Cambios de Estado: Permiten notificar a distintas partes de la aplicación cuando ocurre un cambio de estado específico.
Manejo de Comportamientos Específicos: Se pueden usar para manejar comportamientos específicos que no están cubiertos por eventos nativos del navegador.

Sintaxís de Eventos

Un evento personalizado se puede crear de dos maneras, con Event o con CustomEvent:


new Event(name, {bubbles: false, composed: false, cancelable: false});
new CustomEvent(name, {detail: {}, bubbles: false, composed: false, cancelable: false});

Donde los parámetros son:

Opción	Valor Inicial	Descripción
`name`	null	Nombre del evento, es un dato obligatorio.
`bubbles`	false	Indica si el evento se propaga a sus elementos padres.
`composed`	false	Indica si el evento se propagar en el Shadow DOM.
`cancelable`	false	Indica si el evento se puede cancelar con `preventDefault`.
`detail`	{}	Objeto con datos adicionales para el evento.

Luego podemos crear un evento de la siguiente manera:


new CustomEvent('onChangeName', { detail: { name: 'Kodetop' } });

Utilizar Eventos

Un evento personalizado se puede disparar con el método dispatchEvent, se puede escuchar como cualquier evento nativo con el método addEventListener, si tiene datos adicionales se accede con la propiedad event.detail.


// Crear elemento
let element = document.getElementById('title');

// Capturar evento
element.addEventListener("hello", function(event) {
    console.log('target: ', event.target);
    console.log('detail: ', event.detail);
});

// Disparar evento
element.dispatchEvent(new CustomEvent("hello", { detail: { email: 'Demo'} }));

Manejar eventos es algo sencillo, pero nos puede ayudar a comunicar componentes usando listeners y eventos:

Componente A: Crea un listener para escuchar llamadas a un evento y como resultado ejecuta alguna tarea.
Componente B: Dispara un evento, este evento será detectado y ejecutado en el Componente B.

Conclusión

Los eventos personalizados en JavaScript son una herramienta poderosa para crear aplicaciones modulares e interconectadas. Permiten que diferentes partes de una aplicación se comuniquen entre sí de manera eficiente.