Una lista tiene 1.000 elementos y cada uno necesita un manejador de clic. ¿Cuál es el mejor enfoque?

Opciones

1. Añadir 1.000 listeners separados, uno por elemento
2. Event delegation: un listener en el elemento padre (Opción correcta)
3. Atributos onclick inline en cada elemento
4. Consultar la lista cada segundo para buscar clics

Respuesta

Event delegation: un listener en el padre, con event.target.closest(...)

Por qué

Cuando haces clic en un elemento, el evento 'sube' (bubbling) por todos sus padres.

Así que puedes poner UN listener en el contenedor de la lista y comprobar qué elemento se pulsó con event.target.closest("li").

Usa menos memoria y funciona automáticamente con los elementos que se añadan después.

list.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (item) select(item.dataset.id);
});

Recuerda

Muchos elementos parecidos → un listener en el padre.

Términos clave

• Event delegation
• Event bubbling
• DOM
• Callback
• JavaScript
• Debounce