¿Qué es la delegación?

El delegamiento de eventos es un patrón de diseño que permite a un único manejador de eventos gestionar los eventos de múltiples elementos hijos. En lugar de asignar un manejador a cada elemento, el manejador se asigna al elemento padre. Cuando ocurre un evento en un elemento hijo, este "burbujea" hasta el padre, donde el manejador puede interceptarlo y procesarlo.

Principio de funcionamiento:

• El evento se genera en el elemento objetivo (por ejemplo, <button>).
• El evento se propaga hacia arriba en el árbol DOM hasta los elementos padres.
• El manejador de eventos, adjunto al elemento padre, intercepta el evento.
• En el manejador, se puede determinar en qué elemento hijo ocurrió el evento usando event.target.

Ventajas:

• Rendimiento: Menos manejadores de eventos, lo que reduce el consumo de memoria y CPU, especialmente en listas o tablas grandes.
• Facilidad de gestión: Es más fácil agregar y eliminar elementos del DOM, ya que no es necesario adjuntar/desadjuntar manejadores constantemente.
• Limpieza del código: Menos código repetitivo para adjuntar manejadores.

Ejemplo:

Supongamos que tenemos una lista de elementos y queremos reaccionar a los clics en cada uno.

Sin delegación, tendríamos que adjuntar un manejador a cada <li>:

// Obtenemos todos los elementos <li>
const listItems = document.querySelectorAll('li');

// Adjuntamos un manejador a cada elemento
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Clic en:', this.textContent);
    });
});

Con delegación, solo adjuntamos el manejador al <ul>:

// Obtenemos la lista padre
const list = document.querySelector('ul');

// Adjuntamos el manejador a la lista
list.addEventListener('click', function(event) {
    // Verificamos si el clic fue en un elemento <li>
    if (event.target.tagName === 'LI') {
        console.log('Clic en:', event.target.textContent);
    }
});

En este ejemplo, usamos event.target para determinar qué <li> fue clickeado.