JavaScript Academy · Lektion

Die Capture- und Bubble-Phasen

Verstehen Sie, wie sich Ereignisse durch das DOM bewegen.

Die Capture- und Bubble-Phasen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Zwei Wege durch das DOM

Wenn Sie auf ein Element klicken, wird das Ereignis nicht nur für dieses Element ausgelöst. Es durchläuft den DOM-Baum in zwei Phasen: der Capture-Phase (von oben nach unten, von document zum Ziel) und der Bubble-Phase (von unten nach oben, vom Ziel zurück zu document).

<div id="outer">
  <button id="inner">Click</button>
</div>

Der Standard: Bubbling

Standardmäßig lauscht addEventListener während der Bubble-Phase. Bei einem Klick auf den inneren Button wird zuerst sein Handler ausgeführt, dann der Handler des übergeordneten Elements, anschließend der des Großelternelements und so weiter bis zu document.

inner.addEventListener("click", () => console.log("inner"));
outer.addEventListener("click", () => console.log("outer"));
// Click inner -> logs: "inner" then "outer"

Capture aktivieren

Übergeben Sie als drittes Argument true (oder { capture: true }), um stattdessen während der Capture-Phase zu lauschen. Capture-Handler werden von oben nach unten vor allen Bubble-Handlern ausgeführt.

outer.addEventListener("click", () => console.log("outer capture"), true);
inner.addEventListener("click", () => console.log("inner bubble"));
// Click inner -> "outer capture" then "inner bubble"

Die vollständige Reihenfolge

Bei einem Klick auf #inner mit Handlern in beiden Phasen ist die Reihenfolge: Capture-Phase von oben nach unten, dann das Ziel und anschließend die Bubble-Phase von unten nach oben.

document capture
outer capture
inner (target)
outer bubble
document bubble

event.target im Vergleich zu event.currentTarget

event.target ist das Element, das das Ereignis tatsächlich ausgelöst hat, also die Stelle, an der der Klick erfolgte. event.currentTarget ist das Element, dessen Listener gerade ausgeführt wird. Bei einem Handler eines Bubbling-Elternelements unterscheiden sich diese beiden Werte.

outer.addEventListener("click", (e) => {
  console.log(e.target.id);        // "inner" - where click occurred
  console.log(e.currentTarget.id); // "outer" - listener owner
});

Propagation anhalten

event.stopPropagation() hält die Weiterleitung an: Das Ereignis wird in der aktuellen Phase nicht an das nächste Element weitergegeben. Übergeordnete Handler weiter oben im Baum werden nicht ausgeführt.

inner.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("handled here only");
});
outer.addEventListener("click", () => console.log("never runs"));

stopImmediatePropagation

stopPropagation() lässt weiterhin andere Listener am selben Element laufen. Um auch weitere Listener am selben Element zu blockieren, verwenden Sie event.stopImmediatePropagation().

inner.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("first only");
});
inner.addEventListener("click", () => console.log("blocked"));

preventDefault ist etwas anderes

Verwechseln Sie preventDefault() nicht mit stopPropagation(). preventDefault() bricht die Standardaktion des Browsers ab (etwa das Aufrufen eines Links oder das Absenden eines Formulars), verhindert aber NICHT, dass das Event weiter nach oben propagiert wird.

link.addEventListener("click", (e) => {
  e.preventDefault();  // do not navigate
  // event still bubbles to parents
});

Warum Capture selten verwendet wird

Der meiste Code verwendet Bubbling, weil es der Intuition entspricht: Zuerst reagiert das konkrete Element, anschließend erfahren die Container davon. Capture ist nützlich, wenn ein übergeordnetes Element ein Event abfangen oder ablehnen muss, bevor die untergeordneten Elemente es sehen.

Die Phase prüfen

event.eventPhase zeigt Ihnen, welche Phase aktiv ist: 1 für Capture, 2 für das Ziel und 3 für Bubbling. Das wird nur selten benötigt, hilft aber beim Debuggen komplexer Listener-Ketten.

el.addEventListener("click", (e) => {
  console.log(e.eventPhase); // 1, 2, or 3
}, true);

Nicht alle Events bubbeln

Die meisten UI-Events (click, input, keydown) bubbeln. Einige tun das standardmäßig nicht, etwa focus, blur und mouseenter. Verwenden Sie für diese Events die Bubbling-Varianten (focusin, focusout) oder die Capture-Phase.

Schnelltest

Testen Sie Ihr Verständnis der Event-Phasen.

Zusammenfassung

Events durchlaufen zuerst die Capture-Phase (abwärts) und dann die Bubbling-Phase (aufwärts). Listener verwenden standardmäßig Bubbling; übergeben Sie für Capture den Wert true. e.target ist der Ursprung, e.currentTarget das Element, dem der Listener gehört. Verwenden Sie stopPropagation(), um die Weiterleitung anzuhalten, und preventDefault(), um Standardaktionen abzubrechen. Diese beiden Phasen bilden die Grundlage der Eventdelegation.

Häufig gestellte Fragen

Ist die Lektion „Die Capture- und Bubble-Phasen“ kostenlos?

Ja — der vollständige Text von „Die Capture- und Bubble-Phasen“ 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 „Die Capture- und Bubble-Phasen“?

Verstehen Sie, wie sich Ereignisse durch das DOM bewegen. 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 1 von 4.

Wie lange dauert die Lektion „Die Capture- und Bubble-Phasen“?

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