JavaScript: comprensión de CustomEvent y dispatchEvent

En este artículo, trataré de explicar cómo podemos crear y enviar eventos usando Event, CustomEventconstructores y dispatchEvent()métodos. También exploraremos cómo y con qué fines se utilizan los eventos personalizados y dispatchEvent en nuestros proyectos.

Espero que pueda crear eventos personalizados al final de este artículo.

¡Entonces empecemos!

Una aplicación web consta de una serie de eventos y podemos decir que estos eventos son una de las partes más esenciales de una aplicación web.

En algunos casos, los eventos de JavaScript predeterminados no cumplen con nuestros requisitos. Por ejemplo, en nuestras aplicaciones, estamos usando algunos eventos personalizados que no están disponibles en los eventos predeterminados de JavaScript para agregar notificaciones, actualizar algunos datos, etc. Los veremos en el resto del artículo.

¿Cómo podemos crear eventos personalizados?

Hay dos formas de crear eventos personalizados.

• La primera forma es usando un constructor de eventos .
• La segunda forma es usar el constructor CustomEvent que preferimos.

Constructor de eventos

Puede crear eventos personalizados con el constructor de eventos de la siguiente manera:

Tenga en cuenta que los nombres de los eventos no distinguen entre mayúsculas y minúsculas. Entonces NOTIFICATION_ADD es igual que Notification_Add o notification_add .

const event = new Event('NOTIFICATION_ADD');

Como mencionamos anteriormente, si queremos agregar más datos al objeto de evento, podemos usar el constructor CustomEvent de la siguiente manera:

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

Bueno, el evento fue creado. ¿Que sigue? Por supuesto, queremos usarlo en nuestro proyecto. El último paso para activar un evento es llamar al método dispatchEvent(). Acepta un parámetro de evento dentro del cual hay un objeto de evento.

Dejame mostrarte un ejemplo.

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

// We are dispatching the our custom event here.
window.dispatchEvent(event);

// Let's say we have a handleAddNotification function inside our project like below
function handleAddNotification(e) {
  // logic here.
  
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

<button onclick="handleButtonClick()">
  Create my account
</button>
const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

function handleButtonClick(){
 window.dispatchEvent(event);
}

function handleAddNotification(e) {
  alert(e.detail.title + ' ' + e.detail.message);
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

¿Con qué fines y dónde lo usamos?

Antes de leer, es posible que desee buscar estos artículos sobre micro frontend.

En CicekSepeti, tenemos una arquitectura micro frontend aquí y tenemos componentes personalizados como un botón, información sobre herramientas, una notificación, una casilla de verificación, etc., y varios fragmentos. A veces se necesita comunicación entre estos componentes y fragmentos. Justo en este punto, los eventos personalizados nos ayudan.

Si para hablar de ejemplos, tenemos un componente de notificación en el control remoto y queremos mostrarlo en una de las páginas después de algunas transacciones.

En este caso, el componente de notificación tiene un detector de eventos llamado 'NOTIFICATION_ADD' y la página tiene un formulario de registro. Cuando el usuario presiona el botón de registro, hacemos una solicitud de API y luego mostramos un mensaje de brindis de éxito o error a través del método dispatchEvent y el constructor de eventos personalizados.

Gracias a los detectores de eventos en el componente de notificación, podemos activar nuestros eventos personalizados que se definieron previamente en otros proyectos donde y cuando queramos.

Resumen

El uso de eventos personalizados de JavaScript puede mejorar tanto la experiencia de usuario como de desarrollo de su aplicación cuando se usa correctamente . A partir de ahora, sabemos que podemos usar eventos personalizados cuando los eventos predeterminados de JavaScript, como eventos de teclado, eventos de mouse, etc., no cumplen con nuestros requisitos.

Referencias