Delegación de eventos (Event Delegation) para optimizar el DOM

Introducción Asignar un event listener a cada elemento de una lista larga (como 1000 filas de una tabla) consume mucha memoria y ralentiza la interacción. La Delegación de Eventos soluciona esto aprovechando el Event Bubbling para manejar todos los clics desde un elemento padre. Esto mejora drásticamente el rendimiento y facilita el manejo de elementos dinámicos.

Solución Rápida (Código)

const lista = document.querySelector('.lista-padre');

lista.addEventListener('click', (e) => {
    const target = e.target.closest('.item-hijo');
    
    if (target && lista.contains(target)) {
        console.log('Click en:', target.textContent);
    }
});

Explicación técnica Cuando ocurre un evento en el DOM, este se propaga hacia arriba (fase de burbujeo) a través de sus ancestros. Al colocar el escuchador en el contenedor superior, capturamos cualquier clic realizado en sus descendientes. El uso de element.closest() es la técnica más moderna y robusta para identificar si el clic ocurrió dentro del elemento objetivo, incluso si el usuario hizo clic en un icono o etiqueta interna.

Esta técnica tiene dos ventajas clave: primero, ahorro de memoria al usar un solo objeto de evento en lugar de cientos. Segundo, funciona automáticamente con elementos añadidos dinámicamente (vía AJAX o inputs de usuario) sin necesidad de reasignar nuevos listeners. Es un patrón obligatorio en aplicaciones que manejan grandes volúmenes de datos y busca mantener un Interaction to Next Paint (INP) bajo.

Conclusión La eficiencia en el manejo de eventos separa a los desarrolladores junior de los senior. Si quieres aprender más sobre el flujo del DOM, revisa nuestro artículo sobre Event Bubbling vs Capturing.