Jaka jest różnica między event.preventDefault a event.stopPropagation?

event.preventDefault() anuluje domyślne działanie przeglądarki dla zdarzenia (np. przejście po linku po kliknięciu na <a>), a event.stopPropagation() zatrzymuje propagację lub bubbling zdarzenia w drzewie DOM, zapobiegając wywołaniu tych samych obsługiwaczy na elementach nadrzędnych lub podrzędnych.

Przykład:

// Załóżmy, że jest link wewnątrz div
const link = document.querySelector('a');
const div = document.querySelector('div');

// Obsługa kliknięcia na linku
link.addEventListener('click', (event) => {
  alert('Kliknięto link');
  event.preventDefault(); // Anuluje przejście po linku
});

// Obsługa kliknięcia na div
div.addEventListener('click', (event) => {
  alert('Kliknięto div');
  // Bez event.stopPropagation() ten handler zostanie wywołany po kliknięciu na link
});

Jeśli dodamy event.stopPropagation() do obsługi linku:

// Obsługa kliknięcia na linku z zatrzymaniem propagacji
link.addEventListener('click', (event) => {
  alert('Kliknięto link');
  event.preventDefault();
  event.stopPropagation(); // Zatrzymuje propagację zdarzenia do div
});

// Obsługa kliknięcia na div
div.addEventListener('click', (event) => {
  alert('Kliknięto div'); // Ten alert nie pojawi się po kliknięciu na link
});

Podsumowując:

Metoda	Działanie	Wpływ na domyślne zachowanie	Wpływ na propagację zdarzenia
event.preventDefault()	Anuluje domyślne działanie przeglądarki	Tak	Nie
event.stopPropagation()	Zatrzymuje propagację/bubbling zdarzenia	Nie	Tak