JavaScript - Agregue un detector de eventos a varios elementos en Vanilla JS

Esta es una publicación súper rápida para mostrar cómo agregar un detector de eventos a múltiples elementos HTML en JavaScript puro.

Tuve que hacer esto recientemente para manejar los eventos de clic en uno o más elementos emergentes modales en una sola página.

Evento de JavaScript burbujeante

Los eventos en javascript se propagan (o burbujean) hacia arriba en el árbol DOM desde el elemento target a través de sus padres hasta el elemento raíz (html), los objetos document y window.

Entonces, para escuchar eventos en varios elementos, puede agregar un solo detector de eventos al objeto document y verificar el elemento target.

El siguiente fragmento agrega efectivamente un detector de eventos 'click' a todos los elementos con la clase CSS 'jw-modal' para cerrar las ventanas emergentes modales al hacer clic en segundo plano. Para obtener una demostración del código, consulte Vanilla JS + CSS - Tutorial emergente modal (diálogo) con ejemplo.

// close modals on background click
document.addEventListener('click', event => {
    if (event.target.classList.contains('jw-modal')) {
        closeModal();
    }
});

Recorriendo elementos con forEach

Alternativamente, puede agregar múltiples detectores de eventos recorriendo múltiples elementos con el método javascript forEach.

El siguiente fragmento obtiene el mismo resultado que el anterior al recorrer los elementos de destino. Utiliza querySelectorAll() para obtener todos los elementos con la clase CSS ('jw-modal') y agrega un detector de eventos de clic a cada uno.

El único inconveniente de este enfoque es que no cubrirá los elementos dinámicos que se agregan más adelante, mientras que el ejemplo de creación de eventos incluirá elementos dinámicos porque está escuchando en el objeto raíz document.

document.querySelectorAll('.jw-modal').forEach(el => {
    el.addEventListener('click', event => closeModal());
});