Las fases de captura y propagación
Comprenda cómo viajan los eventos por el DOM.
Las fases de captura y propagación es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Dos recorridos por el DOM
Cuando hace clic en un elemento, el evento no se activa únicamente en ese elemento. Recorre el árbol DOM en dos fases: la fase de captura (de arriba abajo, desde document hasta el destino) y la fase de propagación (de abajo arriba, desde el destino hasta document).
<div id="outer">
<button id="inner">Click</button>
</div>Lo predeterminado: la propagación
De forma predeterminada, addEventListener escucha durante la fase de propagación. Un clic en el botón interior ejecuta primero su controlador, después el controlador de su elemento padre, luego el del abuelo y así sucesivamente hasta document.
inner.addEventListener("click", () => console.log("inner"));
outer.addEventListener("click", () => console.log("outer"));
// Click inner -> logs: "inner" then "outer"Optar por la captura
Pase un tercer argumento con el valor true (o { capture: true }) para escuchar durante la fase de captura. Los controladores de captura se ejecutan de arriba abajo, antes que cualquier controlador de propagación.
outer.addEventListener("click", () => console.log("outer capture"), true);
inner.addEventListener("click", () => console.log("inner bubble"));
// Click inner -> "outer capture" then "inner bubble"El orden completo
Para un clic en #inner con controladores en ambas fases, el orden es: fase de captura de arriba abajo, después el destino y, por último, fase de propagación de abajo arriba.
- captura en document
- captura en outer
- inner (destino)
- propagación en outer
- propagación en document
event.target frente a event.currentTarget
event.target es el elemento que activó realmente el evento, es decir, donde se produjo el clic. event.currentTarget es el elemento cuyo listener se está ejecutando en ese momento. En un controlador de un elemento padre durante la propagación, ambos son diferentes.
outer.addEventListener("click", (e) => {
console.log(e.target.id); // "inner" - where click occurred
console.log(e.currentTarget.id); // "outer" - listener owner
});Detener la propagación
event.stopPropagation() detiene el recorrido: el evento no continuará hasta el siguiente elemento de la fase actual. Los controladores de los elementos padre situados más arriba en el árbol no se ejecutarán.
inner.addEventListener("click", (e) => {
e.stopPropagation();
console.log("handled here only");
});
outer.addEventListener("click", () => console.log("never runs"));stopImmediatePropagation
stopPropagation() permite que se ejecuten otros listeners del mismo elemento. Para bloquear también los listeners hermanos del mismo elemento, use event.stopImmediatePropagation().
inner.addEventListener("click", (e) => {
e.stopImmediatePropagation();
console.log("first only");
});
inner.addEventListener("click", () => console.log("blocked"));preventDefault es diferente
No confunda preventDefault() con stopPropagation(). preventDefault() cancela la acción predeterminada del navegador (seguir un enlace o enviar un formulario), pero NO impide que el evento burbujee.
link.addEventListener("click", (e) => {
e.preventDefault(); // do not navigate
// event still bubbles to parents
});Por qué la captura es poco habitual
La mayoría del código usa el burbujeo porque coincide con la intuición: el elemento específico reacciona primero y, después, los contenedores reciben información sobre ello. La captura resulta útil cuando un elemento padre necesita interceptar o rechazar un evento antes de que lo vean los elementos hijos.
Comprobar la fase
event.eventPhase indica qué fase está activa: 1 captura, 2 en el destino, 3 burbujeo. Rara vez se necesita, pero resulta útil al depurar cadenas complejas de listeners.
el.addEventListener("click", (e) => {
console.log(e.eventPhase); // 1, 2, or 3
}, true);No todos los eventos burbujean
La mayoría de los eventos de la interfaz (click, input, keydown) burbujean. Algunos no lo hacen de forma predeterminada, como focus, blur y mouseenter. Para ellos, use las variantes con burbujeo (focusin, focusout) o la fase de captura.
Comprobación rápida
Compruebe su comprensión de las fases de los eventos.
Resumen
Los eventos recorren primero la captura (hacia abajo) y después el burbujeo (hacia arriba). De forma predeterminada, los listeners usan el burbujeo; pase true para usar la captura. e.target es el origen y e.currentTarget es el elemento propietario del listener. Use stopPropagation() para detener el recorrido y preventDefault() para cancelar las acciones predeterminadas. Estas dos fases son la base de la delegación de eventos.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 59
- Lecciones
- 200
Preguntas frecuentes
¿La lección «Las fases de captura y propagación» es gratis?
Sí — el texto completo de «Las fases de captura y propagación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Las fases de captura y propagación»?
Comprenda cómo viajan los eventos por el DOM. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Las fases de captura y propagación»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Las fases de captura y propagación
- Patrón de delegación de eventos
- Listas dinámicas con delegación
- Eventos personalizados