Qual è la differenza tra event.preventDefault e event.stopPropagation?

event.preventDefault() annulla l'azione predefinita del browser per un evento (ad esempio, navigare al clic su <a>), e event.stopPropagation() ferma la propagazione o il bubbling dell'evento nell'albero DOM, impedendo che gli stessi gestori vengano chiamati sugli elementi genitori o figli.

Esempio:

// Supponiamo ci sia un link all'interno di un div
const link = document.querySelector('a');
const div = document.querySelector('div');

// Gestore di clic sul link
link.addEventListener('click', (event) => {
  alert('Clic sul link');
  event.preventDefault(); // Annulla la navigazione del link
});

// Gestore di clic sul div
div.addEventListener('click', (event) => {
  alert('Clic sul div');
  // Senza event.stopPropagation() questo gestore verrà chiamato dopo il clic sul link
});

Se si aggiunge event.stopPropagation() al gestore del link:

// Gestore di clic sul link con stop della propagazione
link.addEventListener('click', (event) => {
  alert('Clic sul link');
  event.preventDefault();
  event.stopPropagation(); // Ferma la propagazione dell'evento al div
});

// Gestore di clic sul div
div.addEventListener('click', (event) => {
  alert('Clic sul div'); // Questo alert non verrà visualizzato al clic sul link
});

Tabella riepilogativa:

Metodo	Azione	Impatto sul comportamento predefinito	Impatto sulla propagazione dell'evento
event.preventDefault()	Annulla l'azione predefinita del browser	Sì	No
event.stopPropagation()	Ferma la propagazione/bubbling dell'evento	No	Sì