Jaký je rozdíl mezi event.preventDefault a event.stopPropagation?

event.preventDefault() zruší výchozí chování prohlížeče pro událost (například přechod při kliknutí na <a>), a event.stopPropagation() zastaví šíření nebo bubbling události v DOM stromu, čímž zabrání volání stejných handlerů na rodičovských nebo dětských prvcích.

Příklad:

// Předpokládejme, že uvnitř divu je odkaz
const link = document.querySelector('a');
const div = document.querySelector('div');

// Handler kliknutí na odkaz
link.addEventListener('click', (event) => {
  alert('Klik na odkaz');
  event.preventDefault(); // Zruší navigaci
});

// Handler kliknutí na div
div.addEventListener('click', (event) => {
  alert('Klik na div');
  // Bez event.stopPropagation() se tento handler spustí po kliknutí na odkaz
});

Pokud přidáme event.stopPropagation() k handleru odkazu:

// Handler kliknutí na odkaz s ukončením šíření
link.addEventListener('click', (event) => {
  alert('Klik na odkaz');
  event.preventDefault();
  event.stopPropagation(); // Zastaví šíření události k divu
});

// Handler kliknutí na div
div.addEventListener('click', (event) => {
  alert('Klik na div'); // Tento alert se nezobrazí při kliknutí na odkaz
});

Souhrnná tabulka:

Metoda	Akce	Dopad na výchozí chování	Dopad na šíření události
event.preventDefault()	Zruší výchozí chování prohlížeče	Ano	Ne
event.stopPropagation()	Zastaví šíření/bubbling události	Ne	Ano