Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
En vez de agregar un listener a cada elemento hijo, puedes agregar uno solo al elemento padre y usar evento.target para saber cuál de los hijos lo disparó. Esto se llama delegación de eventos.
Explicación
En vez de un listener por cada elemento hijo, delegas la escucha al elemento padre:
Delegación de eventosAgregar un solo addEventListener al elemento padre (como el <ul>) en vez de uno por cada hijo, y usar el evento para saber cuál disparó.
evento.targetLa referencia exacta al elemento donde ocurrió el evento (el <li> específico), aunque el listener esté en el <ul>.
evento.target.tagNameEl nombre de la etiqueta del elemento en mayúsculas (como "LI"), útil para confirmar qué tipo de elemento generó el evento.
Bubbling (propagación)Un evento que ocurre en un elemento hijo también sube y se puede detectar en sus elementos padres; es lo que hace posible la delegación.
Reto rápido
Agrega dos tareas nuevas con el botón y márcalas como completadas haciendo clic sobre ellas, sin modificar el JavaScript.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
La delegación es especialmente útil con elementos creados dinámicamente (como con createElement): no necesitas registrar un addEventListener en cada uno, el del padre ya los cubre a todos automáticamente.
Dato extra
Delegar también es más eficiente en listas largas: en vez de cientos de listeners (uno por elemento), el navegador solo mantiene uno solo en el elemento padre.
Error común
No validar evento.target.tagName antes de actuar: si haces clic en un espacio vacío del <ul> (no sobre un <li>), evento.target sería el propio <ul>, y sin esa validación el código intentaría aplicar classList.toggle al elemento equivocado.
Siguiente paso
Ya sabes reaccionar a clics, envíos de formulario y delegar eventos a elementos padres. En el siguiente módulo vas a conectar tu página con el mundo exterior: peticiones fetch y almacenamiento en el navegador.
Ir a la siguiente lección