JavaScript Academy · Lektion

preventDefault und stopPropagation

Steuern Sie Standardverhalten und Bubbling.

preventDefault und stopPropagation ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Ereignisverhalten steuern

Mit zwei Mechanismen können Sie Ereignisse steuern: Sie verhindern die Standardaktion des Browsers oder stoppen die Weitergabe des Ereignisses durch das DOM.

Standardaktionen

Viele Elemente verfügen über integrierte Standardverhalten: Links führen zu einer Navigation, beim Absenden eines Formulars wird die Seite neu geladen und Kontrollkästchen werden umgeschaltet. Diese Aktionen finden statt, sofern Sie nicht eingreifen.

preventDefault

event.preventDefault bricht die Standardaktion des Browsers ab, lässt Ihren Handler aber weiterhin ausführen.

link.addEventListener("click", (e) => {
  e.preventDefault(); // stop navigation
  console.log("handled in JS");
});

preventDefault bei Formularen

Eine häufige Anwendung besteht darin, das Neuladen der Seite beim Absenden eines Formulars zu verhindern, damit Sie das Absenden mit JavaScript verarbeiten können.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // send data via fetch instead
});

Ereignisweitergabe

Nachdem Ereignisse ihr Zielelement erreicht haben, steigen sie durch die übergeordneten Elemente auf und lösen deren Listener aus. Deshalb kann ein Klick auf ein untergeordnetes Element den Handler eines übergeordneten Elements ausführen.

stopPropagation

event.stopPropagation verhindert, dass das Ereignis an übergeordnete Elemente weitergegeben wird. Der aktuelle Handler wird trotzdem vollständig ausgeführt.

child.addEventListener("click", (e) => {
  e.stopPropagation(); // parent listeners will not fire
});

preventDefault und stopPropagation

Die beiden Methoden sind unabhängig voneinander. preventDefault bricht die Browseraktion ab, während stopPropagation die Weitergabe an andere Elemente verhindert. Sie können eine, beide oder keine der Methoden verwenden.

e.preventDefault();   // no default action
e.stopPropagation();  // no bubbling

Andere Listener auf demselben Element

stopPropagation verhindert NICHT, dass andere Listener auf demselben Element ausgeführt werden. Sie werden weiterhin ausgelöst.

el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));

stopImmediatePropagation

stopImmediatePropagation geht noch weiter: Die Methode stoppt die Weitergabe UND verhindert alle noch ausstehenden Listener auf demselben Element.

el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));

defaultPrevented

Sie können event.defaultPrevented prüfen, um festzustellen, ob ein vorheriger Handler bereits preventDefault aufgerufen hat.

el.addEventListener("click", (e) => {
  console.log(e.defaultPrevented);
});

Sparsam verwenden

Das Stoppen der Weitergabe kann die Ereignisdelegation an anderer Stelle auf der Seite beeinträchtigen. Verwenden Sie diese Technik nur, wenn sie wirklich erforderlich ist, und ziehen Sie Alternativen in Betracht, die mit Delegation kompatibel sind.

Schnelltest

Wählen Sie die richtige Methode aus.

Zusammenfassung

preventDefault bricht die Standardaktion des Browsers ab (Navigation, Absenden usw.). stopPropagation verhindert, dass das Ereignis an übergeordnete Elemente weitergegeben wird, während stopImmediatePropagation zusätzlich andere Listener auf demselben Element blockiert. Diese Methoden sind unabhängig voneinander. Verwenden Sie das Stoppen der Weitergabe sparsam, um die Ereignisdelegation nicht zu beeinträchtigen.

Häufig gestellte Fragen

Ist die Lektion „preventDefault und stopPropagation“ kostenlos?

Ja — der vollständige Text von „preventDefault und stopPropagation“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „preventDefault und stopPropagation“?

Steuern Sie Standardverhalten und Bubbling. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „preventDefault und stopPropagation“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy