Koja je razlika između event.preventDefault i event.stopPropagation?

event.preventDefault() poništava podrazumevano ponašanje pregledača za događaj (na primer, navigaciju pri kliku na <a>), a event.stopPropagation() zaustavlja širenje ili bubbling događaja u DOM stablu, sprečavajući pozivanje istih handlera na roditeljskim ili decom elementima.

Primer:

// Pretpostavimo da postoji link unutar div-a
const link = document.querySelector('a');
const div = document.querySelector('div');

// Handler za klik na link
link.addEventListener('click', (event) => {
  alert('Klik na link');
  event.preventDefault(); // Sprečava navigaciju
});

// Handler za klik na div
div.addEventListener('click', (event) => {
  alert('Klik na div');
  // Bez event.stopPropagation() ovaj handler će se aktivirati nakon klika na link
});

Ako dodamo event.stopPropagation() na handler linka:

// Handler za klik na link sa zaustavljanjem širenja
link.addEventListener('click', (event) => {
  alert('Klik na link');
  event.preventDefault();
  event.stopPropagation(); // Zaustavlja širenje događaja do div-a
});

// Handler za klik na div
div.addEventListener('click', (event) => {
  alert('Klik na div'); // Ovaj alert se neće prikazati pri kliku na link
});

Tabela sažetka:

Metod	Radnja	Uticaj na podrazumevano ponašanje	Uticaj na širenje događaja
event.preventDefault()	Otkaže podrazumevano ponašanje pregledača	Da	Ne
event.stopPropagation()	Zaustavlja širenje/bubbling događaja	Ne	Da