Escucha clics de una lista desde su contenedor

La idea clave

En lugar de colocar una escucha en cada elemento de una lista, puedes registrar una sola en el contenedor. Esto se llama delegación de eventos.

Ejemplo paso a paso

Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.

document.querySelector('#lista').addEventListener('click', event => {
  if (event.target.tagName === 'BUTTON') {
    document.querySelector('#saludo').textContent = event.target.textContent;
  }
});

Editar y probar este mismo ejemplo ↓

1. El listener está en la lista, no en cada botón.
2. Cuando se pulsa uno de sus botones, el evento llega al contenedor.
3. event.target permite leer cuál fue el botón pulsado.

Practica con código

Antes de empezar, piensa: ¿Hace falta una nueva escucha para el botón que añadas?

Añade al HTML un tercer botón dentro de la lista, con el texto «Tres». Púlsalo.