Was ist der Unterschied zwischen event.preventDefault und event.stopPropagation?

event.preventDefault() hebt die Standardaktion des Browsers für ein Ereignis auf (z.B. das Navigieren beim Klicken auf <a>), und event.stopPropagation() stoppt die Weiterleitung oder das Bubbelen des Ereignisses im DOM-Baum, wodurch die gleichen Handler auf Eltern- oder Kindelementen nicht aufgerufen werden.

Beispiel:

// Angenommen, es gibt einen Link innerhalb eines div
const link = document.querySelector('a');
const div = document.querySelector('div');

// Klick-Handler für den Link
link.addEventListener('click', (event) => {
  alert('Klick auf den Link');
  event.preventDefault(); // Verhindert die Navigation
});

// Klick-Handler für das div
div.addEventListener('click', (event) => {
  alert('Klick auf das div');
  // Ohne event.stopPropagation() würde dieser Handler nach dem Klick auf den Link aufgerufen werden
});

Wenn event.stopPropagation() zum Link-Handler hinzugefügt wird:

// Klick-Handler für den Link mit Stoppen der Propagation
link.addEventListener('click', (event) => {
  alert('Klick auf den Link');
  event.preventDefault();
  event.stopPropagation(); // Stoppt die Weiterleitung zum div
});

// Klick-Handler für das div
div.addEventListener('click', (event) => {
  alert('Klick auf das div'); // Dieser Alert erscheint nicht beim Klick auf den Link
});

Zusammenfassungstabelle:

Methode	Aktion	Einfluss auf das Standardverhalten	Einfluss auf die Ereignisweiterleitung
event.preventDefault()	Verhindert die Standardaktion des Browsers	Ja	Nein
event.stopPropagation()	Stoppt die Weiterleitung/Bubbling des Ereignisses	Nein	Ja