Una lista puede contener muchos controles repetidos y se pueden agregar nuevas filas después de que se carga la página. En lugar de adjuntar un oyente a cada botón, escuche su padre compartido e identifique el control activado.
list.addEventListener("click", (event) => {
if (!(event.target instanceof Element)) return;
const button = event.target.closest("button[data-action]");
if (!button || !list.contains(button)) return;
handleAction(button.dataset.action, button.dataset.id);
});Mantenga la verificación del objetivo específica
- Use el más cercano para que los clics en un ícono dentro de un botón aún lleguen a ese botón.
- Confirme que la coincidencia pertenece a la lista prevista antes de actuar.
- Mantenga los datos de la acción en el control propietario de la acción.
No delegues todo
Un oyente directo es más sencillo para un conjunto de controles pequeño y estable o cuando cada elemento necesita una configuración distinta. La delegación es más útil cuando los elementos se repiten o se crean dinámicamente.
Pruebe los clics en contenido anidado, activación del teclado y controles fuera de la lista. El controlador de eventos debe responder una vez a la acción prevista e ignorar los clics no relacionados.