¿Cómo implementar un oyente de eventos eficiente para un modal?

En el desarrollo de aplicaciones web, el manejo eficiente de los eventos es clave para mejorar el rendimiento de la aplicación. Tradicionalmente, podríamos agregar un event listener a cada elemento que queramos que reaccione a un evento. Sin embargo, existe una técnica más óptima conocida como la propagación de eventos. Esta consiste en permitir que un solo elemento padre escuche los eventos de todos sus hijos, mejorando así el rendimiento.

¿Qué es la propagación de eventos?

La propagación de eventos es una técnica que permite que un evento generado en un elemento hijo se propague hacia arriba, hasta ser capturado por un elemento ancestro común. Esto es particularmente útil en marcos como React y Angular, donde el body del documento gestiona todos los eventos de sus elementos hijos. Esta técnica optimiza el manejo de eventos al reducir el número de listeners necesarios.

¿Cómo implementar la propagación de eventos?

Para implementarla en nuestra aplicación, en lugar de agregar un event listener a cada elemento a individualmente, podemos añadir un solo listener al body. Este manejará todos los clics en los hijos:

fullscreen
document.body.addEventListener('click', function(event) {
  let tagName = event.target.tagName;

  if (tagName !== 'IMG' && tagName !== 'A') {
    return;
  }

  // Código adicional para manejar el clic si es un elemento <img> o <a>
});

¿Cómo filtrar eventos específicos?

Una vez integrado en el body, es crucial filtrar los eventos que realmente nos interesan. Utilizaremos las propiedades target y currentTarget de los eventos:

• target: Elemento donde se originó el evento.
• currentTarget: Elemento donde se capturó el evento.

Si solo nos interesa el origen, debemos utilizar target. Filtraremos solo para los elementos deseados, como imágenes o enlaces:

fullscreen
if (!['IMG', 'A'].includes(event.target.tagName)) {
  return;
}

¿Cómo extraer información del dataset?

La extracción de información adicional, como un video ID de un enlace de YouTube, se puede hacer mediante el uso de dataset. Los atributos data-* se utilizan para almacenar datos personalizados en los elementos HTML:

fullscreen
const videoID = event.target.dataset.videoId;
console.log(videoID);

¿Cómo refinar el código para un manejo más seguro?

Añadimos verificaciones para asegurar que solo interactuamos con elementos que posean la clase específica que necesitamos:

fullscreen
let link = event.target;
if (link && link.classList.contains('js-video-link')) {
  // Manipulación del enlace
}

Al emplear estas técnicas, nuestro código se vuelve más eficiente y flexible, ajustándose mejor para futuras modificaciones. Con esta estructura optimizada, estamos listos para integrar librerías externas que requieran un manejo específico de los eventos.