¿Cuál es la diferencia entre event.preventDefault y event.stopPropagation?

event.preventDefault() cancela la acción predeterminada del navegador para un evento (por ejemplo, navegar al hacer clic en <a>), y event.stopPropagation() detiene la propagación o burbujeo del evento en el árbol DOM, evitando que los mismos manejadores se llamen en elementos padres o hijos.

Ejemplo:

// Supongamos que hay un enlace dentro de un div
const link = document.querySelector('a');
const div = document.querySelector('div');

// Manejador de clic en el enlace
link.addEventListener('click', (event) => {
  alert('Clic en el enlace');
  event.preventDefault(); // Cancela la navegación del enlace
});

// Manejador de clic en el div
div.addEventListener('click', (event) => {
  alert('Clic en el div');
  // Sin event.stopPropagation() este manejador se activará después del clic en el enlace
});

Si se añade event.stopPropagation() al manejador del enlace:

// Manejador de clic en el enlace con detención de propagación
link.addEventListener('click', (event) => {
  alert('Clic en el enlace');
  event.preventDefault();
  event.stopPropagation(); // Detiene la propagación del evento al div
});

// Manejador de clic en el div
div.addEventListener('click', (event) => {
  alert('Clic en el div'); // Este alert no aparecerá al hacer clic en el enlace
});

Tabla resumen:

Método	Acción	Impacto en el comportamiento predeterminado	Impacto en la propagación del evento
event.preventDefault()	Cancela la acción predeterminada del navegador	Sí	No
event.stopPropagation()	Detiene la propagación/burbujeo del evento	No	Sí