JavaScript Academy · Lección

preventDefault y stopPropagation

Controle el comportamiento predeterminado y la propagación ascendente.

preventDefault y stopPropagation es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 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.

Controlar el comportamiento de los eventos

Hay dos mecanismos para controlar los eventos: detener la acción predeterminada del navegador y evitar que el evento se propague por el DOM.

Acciones predeterminadas

Muchos elementos tienen comportamientos predeterminados integrados: los enlaces navegan, el envío de un formulario recarga la página y las casillas de verificación cambian de estado. Estas acciones ocurren a menos que intervenga.

preventDefault

event.preventDefault cancela la acción predeterminada del navegador, pero permite que su función controladora siga ejecutándose.

link.addEventListener("click", (e) => {
  e.preventDefault(); // stop navigation
  console.log("handled in JS");
});

preventDefault en formularios

Un uso habitual consiste en impedir que un formulario recargue la página para poder gestionar el envío con JavaScript.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // send data via fetch instead
});

Propagación de eventos

Después de alcanzar el destino, los eventos se propagan hacia arriba mediante los ancestros, activando sus listeners. Por eso un clic en un hijo puede ejecutar la función controladora del padre.

stopPropagation

event.stopPropagation impide que el evento continúe hacia los ancestros. La función controladora actual termina de ejecutarse.

child.addEventListener("click", (e) => {
  e.stopPropagation(); // parent listeners will not fire
});

preventDefault frente a stopPropagation

Son mecanismos independientes. preventDefault cancela la acción del navegador; stopPropagation impide que el evento continúe hacia otros elementos. Puede usar uno, ambos o ninguno.

e.preventDefault();   // no default action
e.stopPropagation();  // no bubbling

Otros listeners en el mismo elemento

stopPropagation NO impide que se ejecuten otros listeners del mismo elemento. Estos siguen activándose.

el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));

stopImmediatePropagation

stopImmediatePropagation va más allá: detiene la propagación y también impide que se ejecuten otros listeners pendientes del mismo elemento.

el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));

defaultPrevented

Puede comprobar event.defaultPrevented para saber si un controlador anterior ya invocó preventDefault.

el.addEventListener("click", (e) => {
  console.log(e.defaultPrevented);
});

Úselo con moderación

Detener la propagación puede interrumpir la delegación de eventos en otras partes de la página. Hágalo solo cuando sea realmente necesario y considere alternativas compatibles con la delegación.

Comprobación rápida

Elija el método adecuado.

Repaso

preventDefault cancela la acción predeterminada del navegador (navegación, envío de formularios, etc.). stopPropagation impide que el evento se propague hacia los ancestros, mientras que stopImmediatePropagation también bloquea otros listeners del mismo elemento. Son herramientas independientes; use los métodos que detienen la propagación con moderación para no interrumpir la delegación.

Preguntas frecuentes

¿La lección «preventDefault y stopPropagation» es gratis?

Sí — el texto completo de «preventDefault y stopPropagation» 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 «preventDefault y stopPropagation»?

Controle el comportamiento predeterminado y la propagación ascendente. 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 3 de 4.

¿Cuánto tiempo toma la lección «preventDefault y stopPropagation»?

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

← Volver a JavaScript Academy