Dominando la Propagación, Captura y Delegación de Eventos — La Guía Definitiva para Entrevistas de Frontend
Priyen Mehta | Desarrollador Full-Stack Senior
¿Alguna vez has hecho clic en un botón dentro de un div y te has preguntado por qué también se disparó el evento del div padre?
Eso, amigo mío, es propagación de eventos — uno de los conceptos más preguntados (y más malentendidos) en las entrevistas de JavaScript.
Vamos a desglosar Event Bubbling, Capturing y Delegation con ejemplos claros, visuales y consejos para aprobar tu próxima entrevista de frontend.
1. ¿Qué es la Propagación de Eventos?
Cuando ocurre un evento (como un click) en un elemento, el navegador no solo lo maneja allí.
En su lugar, el evento se desplaza a través de tres fases:
- Fase de captura → Desde la parte superior (documento) hacia el objetivo
- Fase de objetivo → El evento llega al elemento que realmente hiciste clic
- Fase de burbujeo → El evento burbujea desde el objetivo de vuelta a la raíz
Por lo tanto, cuando haces clic en un botón dentro de divs anidados, el evento fluye de esta manera:
document → body → div → button
↓
document ← body ← div ← button
Ejemplo: Burbujeo en Acción
<div id="parent">
<button id="child">Click Me</button>
</div>
document.getElementById('parent').addEventListener('click', () => {
console.log('Parent clicked');
});
document.getElementById('child').addEventListener('click', () => {
console.log('Child clicked');
});
Salida al hacer clic en el botón:
Child clicked
Parent clicked
El evento del hijo se ejecuta primero, luego el del padre — eso es burbujeo.
Consejo para Entrevistas
Los oyentes de eventos predeterminados en JavaScript usan la fase de burbujeo.
Pero puedes escuchar en la fase de captura pasando un tercer argumento true:
element.addEventListener('click', handler, true);
Ahora, el evento se captura en el camino hacia abajo, antes de que se alcance el objetivo.
2. Event Capturing en Ejemplo
<div id="outer">
<div id="inner">Click here</div>
</div>
document.getElementById('outer').addEventListener('click', () => {
console.log('Outer capturing');
}, true);
document.getElementById('inner').addEventListener('click', () => {
console.log('Inner clicked');
});
Salida:
Outer capturing
Inner clicked
La captura ocurre antes de que el objetivo reciba el evento.
3. Delegación de Eventos — La Manera Inteligente de Manejar Eventos
En lugar de agregar 100 oyentes a 100 botones, puedes agregar un oyente a su padre y dejar que el burbujeo de eventos haga el trabajo.
<ul id="list">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
const list = document.getElementById('list');
list.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
console.log(`You clicked on ${e.target.textContent}`);
}
});
Ahora, incluso si agregas dinámicamente nuevos elementos <li>, seguirán funcionando — no se necesitan oyentes adicionales.
Esto es delegación de eventos — eficiente, escalable y limpio.
¿Por Qué a los Entrevistadores Les Encanta Esta Pregunta?
Porque prueba:
- Tu comprensión de cómo funciona el modelo de eventos del DOM
- Tu capacidad para optimizar los oyentes de eventos
- Tu mentalidad de resolución de problemas para interfaces de usuario dinámicas
Preguntas comunes de seguimiento:
- ¿Cuál es la diferencia entre
event.targetyevent.currentTarget? - ¿Cómo detienes el burbujeo de eventos?
event.stopPropagation();
- ¿Cómo evitar el comportamiento predeterminado del navegador?
event.preventDefault();
Resumen Rápido
Vamos a resumirlo con un modelo mental simple que siempre puedes recordar:
Fase de Captura:
Piensa en ello como el evento viajando desde la parte superior del DOM hacia abajo al elemento que hiciste clic.
Puedes escuchar durante esta fase pasandotruecomo el tercer argumento enaddEventListener.
Fase de Objetivo:
Este es el elemento real que se hizo clic — el evento ha llegado a su destino.
Fase de Burbujeo:
Después de que el objetivo lo maneja, el evento burbujea hacia arriba a través de los ancestros (hijo → padre → documento).
Esta es la fase predeterminada cuando adjuntas oyentes sin especificar nada.- Delegación de Eventos:
En lugar de adjuntar un montón de oyentes a cada hijo, adjunta un oyente al padre y deja que el burbujeo lo maneje.
Esto hace que tu código sea más eficiente y escalable.
Pensamientos Finales
Entender la propagación de eventos no se trata solo de escribir código más limpio — se trata de pensar como el navegador.
La próxima vez que estés depurando “¿Por qué se disparó este evento dos veces?”, sabrás exactamente en qué fase culpar 
Si te ha sido útil, aplaudir 
y seguirme para más Guías de Entrevistas de Frontend.
Un mensaje de nuestro Fundador
Hola, Sunil aquí. Quería tomar un momento para agradecerte por leer hasta el final y por ser parte de esta comunidad.
¿Sabías que nuestro equipo ejecuta estas publicaciones como un esfuerzo voluntario para más de 3.5 millones de lectores mensuales? No recibimos financiación, lo hacemos para apoyar a la comunidad. 
Si quieres mostrar algo de amor, tómate un momento para seguirme en LinkedIn, TikTok, Instagram. También puedes suscribirte a nuestro boletín semanal.
Y antes de irte, no olvides aplaudir y seguir al escritor️!
Publicado en JavaScript en Plain English
Última publicación hace 3 horas
Contenido nuevo de JavaScript y Desarrollo Web todos los días. Síguenos para unirte a nuestros 3.5M+ lectores mensuales.
Escrito por Priyen Mehta | Desarrollador Full-Stack Senior
Ingeniero de Software Senior con 5+ años de experiencia práctica en la construcción de aplicaciones web escalables y responsivas y sistemas backend robustos.