Aký je rozdiel medzi event.preventDefault a event.stopPropagation?

event.preventDefault() zruší predvolané správanie prehliadača pre udalosť (napríklad, navigáciu pri kliknutí na <a>), a event.stopPropagation() zastaví šírenie alebo bubbling udalosti v DOM strome, čím zabráni volaniu tých istých handlerov na rodičovských alebo detských prvkoch.

Príklad:

// Predpokladajme, že je odkaz vnútri divu
const link = document.querySelector('a');
const div = document.querySelector('div');

// Handler pre kliknutie na odkaz
link.addEventListener('click', (event) => {
  alert('Klik na odkaz');
  event.preventDefault(); // Zruší navigáciu
});

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

Ak pridáme event.stopPropagation() k handleru odkazu:

// Handler pre klik na odkaz so zastavením šírenia
link.addEventListener('click', (event) => {
  alert('Klik na odkaz');
  event.preventDefault();
  event.stopPropagation(); // Zastaví šírenie udalosti k divu
});

// Handler pre klik na div
div.addEventListener('click', (event) => {
  alert('Klik na div'); // Tento alert sa nezobrazí pri kliknutí na odkaz
});

Sumárna tabuľka:

Metóda	Činnosť	Vplyv na predvolené správanie	Vplyv na šírenie udalosti
event.preventDefault()	Zruší predvolené správanie prehliadača	Áno	Nie
event.stopPropagation()	Zastaví šírenie/bubbling udalosti	Nie	Áno