Quelle est la différence entre event.preventDefault et event.stopPropagation?

event.preventDefault() annule l'action par défaut du navigateur pour un événement (par exemple, suivre un lien lors du clic sur <a>), et event.stopPropagation() empêche la propagation ou la phase de capture de l'événement dans l'arbre DOM, évitant ainsi l'appel des mêmes gestionnaires sur les éléments parents ou enfants.

Exemple:

// Supposons qu'il y ait un lien à l'intérieur d'un div
const link = document.querySelector('a');
const div = document.querySelector('div');

// Gestionnaire de clic sur le lien
link.addEventListener('click', (event) => {
  alert('Clic sur le lien');
  event.preventDefault(); // Annule la navigation du lien
});

// Gestionnaire de clic sur le div
div.addEventListener('click', (event) => {
  alert('Clic sur le div');
  // Sans event.stopPropagation() ce gestionnaire sera appelé après le clic sur le lien
});

Si on ajoute event.stopPropagation() au gestionnaire du lien:

// Gestionnaire de clic sur le lien avec arrêt de la propagation
link.addEventListener('click', (event) => {
  alert('Clic sur le lien');
  event.preventDefault();
  event.stopPropagation(); // Empêche la propagation de l'événement vers le div
});

// Gestionnaire de clic sur le div
div.addEventListener('click', (event) => {
  alert('Clic sur le div'); // Cet alert ne s'affichera pas lors du clic sur le lien
});

Tableau récapitulatif:

Méthode	Action	Impact sur le comportement par défaut	Impact sur la propagation de l'événement
event.preventDefault()	Annule l'action par défaut du navigateur	Oui	Non
event.stopPropagation()	Empêche la propagation/burbulement de l'événement	Non	Oui