Care este diferența dintre event.preventDefault și event.stopPropagation?

event.preventDefault() anulează acțiunea implicită a browserului pentru un eveniment (de exemplu, navigarea la clic pe <a>), iar event.stopPropagation() oprește propagarea sau bubbling-ul evenimentului în arborele DOM, evitând apelarea aceluiași handler pe elementele părinte sau copil.

Exemplu:

// Presupunem că există un link în interiorul unui div
const link = document.querySelector('a');
const div = document.querySelector('div');

// Handler pentru clic pe link
link.addEventListener('click', (event) => {
  alert('Clic pe link');
  event.preventDefault(); // Anulează navigarea
});

// Handler pentru clic pe div
div.addEventListener('click', (event) => {
  alert('Clic pe div');
  // Fără event.stopPropagation() acest handler va fi apelat după clic pe link
});

Dacă se adaugă event.stopPropagation() la handler-ul link-ului:

// Handler pentru clic pe link cu oprirea propagării
link.addEventListener('click', (event) => {
  alert('Clic pe link');
  event.preventDefault();
  event.stopPropagation(); // Oprește propagarea evenimentului către div
});

// Handler pentru clic pe div
div.addEventListener('click', (event) => {
  alert('Clic pe div'); // Acest alert nu va fi afișat la clic pe link
});

Tabel sumar:

Metodă	Acțiune	Impact asupra comportamentului implicit	Impact asupra propagării evenimentului
event.preventDefault()	Anulează acțiunea implicită a browserului	Da	Nu
event.stopPropagation()	Oprește propagarea/bubbling-ul evenimentului	Nu	Da