javascript
06-05-2026

Event delegation: qué es y cómo funciona en javascript

Event Delegation es una técnica avanzada de JavaScript que consiste en agregar un solo event listener a un elemento padre, en lugar de agregar un listener a cada elemento hijo individualmente. Gracias al event bubbling, cuando un evento ocurre en un elemento hijo, este se propaga hacia arriba, hasta el document. Ese evento se podemos "atrapar" en el padre y saber exactamente qué hijo lo originó.

¿Por qué es útil?

  • Mejora el rendimiento: Agregar miles de event listeners es lento y consume mucha memoria.
  • Funciona con elementos dinámicos: Si se crean nuevos elementos con JavaScript> los nuevos elementos automáticamente tendrán el comportamiento sin necesidad de volver a agregar listeners.
  • Código más limpio y mantenible.

Cómo funciona

  • Forma incorrecta:

    //Si se agregan más "li" después, no tendrán el evento.

document.querySelectorAll('li').forEach(item => {
item.addEventListener('click', () => {
console.log('Click en:', item.textContent);
});
});
  • Forma correcta:

    //Ahora, aunque se agreguen nuevos "li" dinámicamente, si que tendrán el evento.
// Solo un listener en el padre
document.getElementById('mi-lista').addEventListener('click', (e) => {

// Verificamos si el clic fue en un 
  • 
if (e.target.tagName === 'LI') {
console.log('Click en:', e.target.textContent);
}
});
  • Ejemplo más avanzado:

    onst lista = document.getElementById('mi-lista');

lista.addEventListener('click', (e) => {
// Delegación con clases
if (e.target.classList.contains('boton-eliminar')) {
e.target.parentElement.remove(); // Elimina el elemento
}

if (e.target.classList.contains('boton-editar')) {
console.log('Editar:', e.target.dataset.id);
}
});

Ventajas

  • Mejor rendimiento
  • Funciona con contenido dinámico
  • Menos listeners en memoria
  • Código más escalable

Desventajas

  • Un poco más de código para verificar "e.target"
  • Puede volverse complejo si tienes muchos tipos de eventos diferentes