Tenemos un centenar de oyentes de eventos. Todos ellos apuntan a la misma función de oyente, pero hay 100 oyentes. ¿Y si trasladamos todos los escuchadores a un ancestro común, el elemento <div>?

Ahora sólo hay un manejador de eventos de clic y el navegador no necesita almacenar un centenar de oyentes diferentes. Así que la delegación se reduce a tres sencillos pasos

1. Identificar un ancestro común de un grupo de elementos para seguir los acontecimientos.
2. Registrar un manejador de eventos en el elemento antecesor que queremos
3. Rastrear del grupo de elementos.
4. En el manejador de eventos utilice event.target para seleccionar el elemento de destino.

Este enfoque facilita la inicialización de oyentes del mismo tipo. Los elementos pueden añadirse, eliminarse o cambiarse sin tener que añadir o eliminar manualmente los controladores de eventos.

Ejemplo:

<ul id="lista">
  <li data-id="1">Elemento 1</li>
  <li data-id="2">Elemento 2</li>
  <li data-id="3">Elemento 3</li>
</ul>

 const lista = document.getElementById('lista');

  lista.addEventListener('click', function(event) {
    // Verificamos si el click fue en un <li>
    if (event.target.tagName === 'LI') {
      console.log('Hiciste click en:', event.target.textContent);
      console.log('ID del elemento:', event.target.dataset.id);
    }
  });