Aprende a manejar eventos de listas dinámicas usando un único listener en el contenedor con `event.target`, `closest` y guard clauses.
Cuando hay muchos botones o elementos dinámicos, añadir un listener por nodo genera ruido y mantenimiento costoso.
La delegación de eventos aprovecha el bubbling: escuchas en el contenedor y decides acción según el elemento real clicado.
Con este patrón, tu UI escala mejor: nuevos elementos funcionan sin registrar listeners extra.
Objetivo de esta lección: implementar delegación robusta con filtros claros y sin efectos colaterales.
Escuchar arriba, decidir abajo.
En lugar de registrar eventos en cada botón hijo, registras un único `click` en su contenedor padre.
Luego inspeccionas `event.target` y localizas el elemento de interés con `closest` para ejecutar la acción correcta.
`closest` evita fallos cuando haces click en iconos internos o texto anidado.
`event.target` puede ser un `span` dentro de un botón. `closest('[data-action]')` sube por el árbol para encontrar el nodo accionable.
Si no hay match, sales temprano con guard clause para evitar lógica accidental.
Un listener puede gobernar crear, editar, eliminar y más.
Con una tabla/lista, cada botón puede declarar `data-action` y `data-id`. El handler decide qué hacer según esos valores.
Este enfoque reduce duplicación y centraliza el flujo de interacción de la vista.
La mayoría vienen de suponer mal qué nodo disparó el evento.
Error clásico: usar `event.target.matches('.boton')` y olvidar que el click puede caer en un hijo interno del botón.
Otro fallo común: colocar el listener en un contenedor demasiado alto y capturar clicks que no te interesan.
Si cumples esto, dominas delegación para interfaces reales.
El objetivo no es solo que funcione con tres botones, sino que el patrón aguante cuando la lista crezca y cambie dinámicamente.
Antes de cerrar tarea, verifica robustez con clicks en iconos internos, nodos recién añadidos y elementos fuera de alcance.
Aprende a manejar eventos de listas dinámicas usando un único listener en el contenedor con `event.target`, `closest` y guard clauses.
Código del tema: event.target · closest · matches
Escuchar arriba, decidir abajo.
En lugar de registrar eventos en cada botón hijo, registras un único `click` en su contenedor padre.
Luego inspeccionas `event.target` y localizas el elemento de interés con `closest` para ejecutar la acción correcta.
`closest` evita fallos cuando haces click en iconos internos o texto anidado.
`event.target` puede ser un `span` dentro de un botón. `closest('[data-action]')` sube por el árbol para encontrar el nodo accionable.
Si no hay match, sales temprano con guard clause para evitar lógica accidental.
const lista = document.querySelector('#lista');
lista.addEventListener('click', (event) => {
const boton = event.target.closest('[data-action]');
if (!boton || !lista.contains(boton)) return;
const action = boton.dataset.action;
console.log('acción:', action);
});Un listener puede gobernar crear, editar, eliminar y más.
Con una tabla/lista, cada botón puede declarar `data-action` y `data-id`. El handler decide qué hacer según esos valores.
Este enfoque reduce duplicación y centraliza el flujo de interacción de la vista.
contenedor.addEventListener('click', (event) => {
const trigger = event.target.closest('[data-action]');
if (!trigger) return;
const { action, id } = trigger.dataset;
if (action === 'editar') editarItem(id);
if (action === 'eliminar') eliminarItem(id);
});La mayoría vienen de suponer mal qué nodo disparó el evento.
Error clásico: usar `event.target.matches('.boton')` y olvidar que el click puede caer en un hijo interno del botón.
Otro fallo común: colocar el listener en un contenedor demasiado alto y capturar clicks que no te interesan.
const boton = event.target.closest('button[data-action]');
if (!boton) return;
if (!event.currentTarget.contains(boton)) return;Si cumples esto, dominas delegación para interfaces reales.
El objetivo no es solo que funcione con tres botones, sino que el patrón aguante cuando la lista crezca y cambie dinámicamente.
Antes de cerrar tarea, verifica robustez con clicks en iconos internos, nodos recién añadidos y elementos fuera de alcance.