Wat is het verschil tussen event.preventDefault en event.stopPropagation?

event.preventDefault() annuleert de standaardactie van de browser voor een gebeurtenis (bijvoorbeeld navigeren bij het klikken op <a>), en event.stopPropagation() stopt de verspreiding of bubbelen van het evenement in de DOM-structuur, waardoor dezelfde handlers niet worden aangeroepen op ouder- of kindelementen.

Voorbeeld:

// Stel dat er een link binnen een div is
const link = document.querySelector('a');
const div = document.querySelector('div');

// Klik-handler voor de link
link.addEventListener('click', (event) => {
  alert('Klik op de link');
  event.preventDefault(); // Annuleert de navigatie
});

// Klik-handler voor de div
div.addEventListener('click', (event) => {
  alert('Klik op de div');
  // Zonder event.stopPropagation() wordt deze handler na de klik op de link aangeroepen
});

Als event.stopPropagation() wordt toegevoegd aan de link-handler:

// Klik-handler voor de link met stop van de propagatie
link.addEventListener('click', (event) => {
  alert('Klik op de link');
  event.preventDefault();
  event.stopPropagation(); // Stop de verspreiding naar de div
});

// Klik-handler voor de div
div.addEventListener('click', (event) => {
  alert('Klik op de div'); // Deze alert wordt niet getoond bij klikken op de link
});

Samenvatting tabel:

Methode	Actie	Invloed op standaard gedrag	Invloed op verspreiding van het evenement
event.preventDefault()	Annuleert de standaardactie van de browser	Ja	Nee
event.stopPropagation()	Stop de verspreiding/bubbling van het evenement	Nee	Ja