Propagación y delegación de eventos

1 // Las tres fases de un evento

Cuando ocurre un evento sobre un elemento, el navegador no avisa sólo a ese elemento. Lo hace recorrer el árbol DOM en tres fases:

1. Captura: el evento baja desde window pasando por cada antepasado hasta llegar al elemento.
2. Destino: el evento llega al elemento donde se originó, el target.
3. Burbuja: el evento sube de vuelta desde el elemento hasta window, pasando otra vez por cada antepasado.

En cada paso, el navegador ejecuta los listeners que haya registrados en ese elemento para ese tipo de evento. Por defecto, addEventListener escucha en la fase de burbuja. Si pasas la opción { capture: true }, escucha en la de captura, algo que rara vez necesitarás.

lista.addEventListener('click', () => console.log('ul'));
item.addEventListener('click', () => console.log('li'));

// Al hacer clic en el li se muestra: 'li' y después 'ul'

La mayoría de eventos suben por burbuja, pero no todos: focus y blur no lo hacen. Si necesitas algo equivalente que suba, existen focusin y focusout.

2 // target y currentTarget

Como un mismo evento pasa por varios elementos, el objeto evento distingue dos cosas:

Si el <li> contiene un <span> y el usuario pulsa justo sobre el texto del span, e.target será el span, no el li. Este detalle es la causa de muchos errores y es la razón por la que se usa closest, como verás enseguida.

3 // Detener la propagación

El método e.stopPropagation() detiene el viaje del evento: los listeners de los elementos siguientes en el recorrido no se ejecutarán.

botonInterior.addEventListener('click', (e) => {
  e.stopPropagation();   // la tarjeta que lo contiene no se entera del clic
  borrarTarjeta();
});

4 // Delegación de eventos

Imagina una lista de cien tareas, cada una con un botón «Borrar». Podrías registrar cien listeners, pero hay dos problemas: consumen memoria y, sobre todo, las tareas que añadas después no tendrán listener, porque se crearon cuando el registro ya se había hecho.

La delegación aprovecha la burbuja: se registra un único listener en un contenedor que siempre existe y, dentro, se averigua qué elemento concreto originó el clic.

const lista = document.querySelector('#lista');

lista.addEventListener('click', (e) => {
  const boton = e.target.closest('.borrar');
  if (!boton) return;                 // el clic no fue en un botón de borrar

  const item = boton.closest('li');
  item.remove();
});

El patrón tiene siempre la misma forma:

1. Un listener en el contenedor.
2. e.target.closest(selector) para encontrar el elemento que te interesa, aunque el clic haya caído en un icono o un texto de dentro.
3. Si no hay coincidencia, salir sin hacer nada.
4. Si la hay, actuar sobre él, normalmente usando sus atributos data-* para saber a qué dato corresponde.

lista.addEventListener('click', (e) => {
  const boton = e.target.closest('.completar');
  if (!boton) return;

  const id = Number(boton.closest('li').dataset.id);
  const tarea = tareas.find(t => t.id === id);
  tarea.hecha = !tarea.hecha;

  pintar(tareas);
});

5 // Para practicar

Observa el viaje de un evento por la consola y aplica la delegación a una lista que se repinta entera. Cada ejercicio trae el enunciado en los comentarios del código.