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.
Envíar Comentario
En este sitio los comentarios se publican previa aprobación del equipo de Kodetop. Evita los comentarios ofensivos, obscenos o publicitarios. Si deseas publicar código fuente puedes hacerlo entre las etiquedas
<pre></pre>