Event Bubbling und Capturing | W3docs JavaScript Tutorial

Event Bubbling und Capturing in JavaScript meistern

Wenn Sie auf eine Schaltfläche klicken, wird das Klickereignis nicht nur auf dieser Schaltfläche ausgelöst — es wandert durch jedes übergeordnete Element auf dem Weg zum Ziel und zurück. Diese Wanderung wird als Event Propagation bezeichnet und verläuft in zwei Richtungen: Capturing (abwärts zum Ziel) und Bubbling (zurück nach oben zur Wurzel). Das Verständnis beider Konzepte ist entscheidend für die zuverlässige Ereignisbehandlung in echten Anwendungen, insbesondere wenn verschachtelte Elemente eigene Handler besitzen.

Dieser Leitfaden erklärt das Propagationsmodell, zeigt, wie man in jeder Phase zuhört, und behandelt die praktischen Werkzeuge — event.target, event.currentTarget, stopPropagation() und Event-Delegation — die diese Konzepte im Alltag nützlich machen. Er baut auf den Grundlagen auf, die in Einführung in Browser-Events und JavaScript Events behandelt werden.

Event Propagation verstehen

Event Propagation im DOM findet in genau drei Phasen statt, in dieser Reihenfolge:

Capturing-Phase — das Ereignis beginnt an der Spitze des Baums (window → document → <html> → …) und wandert abwärts zum Zielelement.
Zielphase — das Ereignis erreicht das Element, mit dem Sie tatsächlich interagiert haben.
Bubbling-Phase — das Ereignis wandert aufwärts vom Ziel zur Wurzel zurück.

                 │ capturing (down)    ▲ bubbling (up)
   <html>        ▼                     │
     <div>       ▼                     │
       <p> ───►  target (you clicked here)

Standardmäßig werden Handler, die mit addEventListener und inline on*-Attributen hinzugefügt werden, in der Bubbling-Phase ausgeführt. Die Capturing-Phase muss explizit aktiviert werden.

Event Bubbling

In der Bubbling-Phase beginnt ein Ereignis beim spezifischsten Element (dem tiefsten Knoten, mit dem Sie interagiert haben) und fließt dann aufwärts durch jeden Vorfahren in Richtung document. Dies ist das Standardverhalten für fast jedes Ereignis.

<div onclick="alert('You clicked the DIV!');">
  Click me or one of my children:
  <p onclick="alert('You clicked the P!');">Click me!</p>
</div>

Probier es selbst »

Wenn Sie auf das <p> klicken, sehen Sie zuerst den Alert für <p>, dann den Alert für <div>, da das Ereignis nach oben blubbert. Wenn Sie direkt auf das <div> klicken (außerhalb des <p>), wird nur der <div>-Alert ausgelöst — das Ereignis erreicht <p> nie, da <p> kein Vorfahre des Klickpunkts ist.

Event Capturing

Capturing ist die erste Phase, in der das Ereignis abwärts zum Ziel wandert. Sie wird viel seltener verwendet als Bubbling, ist aber praktisch, wenn Sie ein Ereignis abfangen müssen, bevor ein innerer Handler es verarbeiten kann.

Um während der Capturing-Phase zu lauschen, setzen Sie das dritte Argument von addEventListener auf true (oder übergeben Sie { capture: true }):

<div id="outer">
  Click me or one of my children:
  <p id="inner">Click me!</p>
</div>

<script>
  document.getElementById('outer').addEventListener('click', function () {
    alert('Captured on DIV!');
  }, true); // true → capturing phase

  document.getElementById('inner').addEventListener('click', function () {
    alert('Captured on P!');
  }, true);
</script>

Probier es selbst »

Klicken Sie auf das <p>, und die Alerts werden von oben nach unten ausgelöst: zuerst DIV (ein Vorfahre, der auf dem Weg nach unten erreicht wird), dann P (das Ziel). Bei Bubbling-Handlern wäre die Reihenfolge umgekehrt.

Das richtige Element ansprechen

Innerhalb eines Handlers müssen Sie in der Regel wissen, bei welchem Element das Ereignis begann und an welchem Element der Handler angehängt ist. Zwei Eigenschaften geben darüber Auskunft:

event.target — das Element, bei dem das Ereignis entstand (das tiefste angeklickte Element). Es bleibt während der gesamten Propagation gleich.
event.currentTarget — das Element, dessen Listener gerade ausgeführt wird. Es ändert sich, wenn das Ereignis durch den Baum wandert, und entspricht this innerhalb eines regulären Funktions-Handlers.

function logTargets(event) {
  console.log("target:", event.target.tagName);
  console.log("currentTarget:", event.currentTarget.tagName);
}
// Imagine this handler is on a <div> and you click a nested <p>:
// target:        P    (where the click happened)
// currentTarget: DIV  (where the listener lives)

event.target ist das, was Event-Delegation (wie unten gezeigt) möglich macht — ein Handler auf einem Elternelement kann genau erkennen, auf welches Kind geklickt wurde.

Propagation steuern

JavaScript bietet verschiedene Methoden, um zu steuern, wie weit ein Ereignis wandert.

Methode	Effekt
`event.stopPropagation()`	Verhindert, dass das Ereignis zum nächsten Element im Pfad gelangt (kein weiteres Bubbling/Capturing). Handler am selben Element werden noch ausgeführt.
`event.stopImmediatePropagation()`	Stoppt die Propagation und verhindert, dass weitere Handler am selben Element ausgeführt werden.
`event.preventDefault()`	Bricht die Standardaktion des Browsers ab (z. B. das Folgen eines Links). Stoppt die Propagation nicht.

stopPropagation() und preventDefault() sind unabhängig voneinander. Das Stoppen der Propagation bricht das Standardverhalten nicht ab, und umgekehrt.

Ein Hinweis zu Ereignissen, die nicht blubbern

Die meisten Ereignisse blubbern, aber einige nicht — zum Beispiel focus, blur, mouseenter, mouseleave und load. Für diese können Sie sich nicht darauf verlassen, dass ein übergeordneter Handler sie über Bubbling abfängt; verwenden Sie die bubbelnden Äquivalente (focusin/focusout, mouseover/mouseout) oder hängen Sie den Listener direkt an. Sie können jederzeit event.bubbles überprüfen, um festzustellen, ob ein bestimmtes Ereignis an der Bubbling-Phase teilnimmt.

Praktische Beispiele

Beispiel 1: Event Bubbling stoppen

Manchmal möchten Sie, dass ein Klick auf ein Kindelement den Handler des Elternelements nicht auslöst:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Propagation Example</title>
<style>
  .container {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    padding: 20px;
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-top: 20px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="container" onclick="alert('You clicked the container!');">
  Click the pink box to see event propagation:
  <div class="box" onclick="event.stopPropagation(); alert('You clicked the box without bubbling!');"></div>
</div>

</body>
</html>

Probier es selbst »

In diesem Beispiel gibt es einen Container mit hellblauem Hintergrund, der eine pinke Box enthält. Ein Klick irgendwo im Container löst einen Alert mit der Meldung "You clicked the container!" aus. Ein Klick auf die pinke Box hingegen löst einen anderen Alert mit "You clicked the box without bubbling!" aus, weil event.stopPropagation() verhindert, dass das Klickereignis zum Container hochblubbert.

Beispiel 2: Bubbling und Capturing kombinieren

Dieses Beispiel zeigt, wie ein Ereignis sowohl in der Capturing- als auch in der Bubbling-Phase behandelt werden kann:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Capture and Bubbling Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }

  #outerContainer {
    border: 2px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
  }

  #innerElement {
    background-color: #ffa8a8;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div id="outerContainer" onclick="alert('Event Bubbled from Outer Container');">
  <p style="margin: 0;">Click anywhere in this outer container:</p>
  <p id="innerElement">Click me!</p>
</div>

<script>
  // Event listener attached to the outer container during the capturing phase
  document.getElementById('outerContainer').addEventListener('click', function() {
    alert('Event Captured by Outer Container');
  }, true);

  // Event listener attached to the inner element during the bubbling phase
  document.getElementById('innerElement').addEventListener('click', function() {
    alert('Event Bubbled from Inner Element');
  }, false);
</script>

</body>
</html>

Probier es selbst »

Wenn Sie auf das innere Element klicken:

Der Capturing-Listener auf #outerContainer wird zuerst ausgeführt und gibt "Event Captured by Outer Container" aus (er befindet sich auf dem Weg abwärts zum Ziel).
Der Bubbling-Listener auf #innerElement wird als nächstes ausgeführt und gibt "Event Bubbled from Inner Element" aus (das Ziel selbst).
Schließlich wird der inline onclick auf #outerContainer ausgeführt, wenn das Ereignis nach oben blubbert, und gibt "Event Bubbled from Outer Container" aus.

Dadurch wird der vollständige Propagationspfad in der richtigen Reihenfolge sichtbar: erst abwärts über Capturing, dann das Ziel, dann wieder aufwärts über Bubbling.

Beispiel 3: Event-Delegation

Die häufigste praktische Anwendung von Bubbling ist die Event-Delegation — einen einzigen Listener an einem Elternelement zu befestigen, anstatt einen Listener pro Kind. Da Klicks nach oben blubbern, kann das Elternelement event.target verwenden, um herauszufinden, auf welches Kind geklickt wurde. Dies ist effizient und funktioniert automatisch für später hinzugefügte Elemente.

const list = document.getElementById("menu");

list.addEventListener("click", function (event) {
  // Did the click originate on an <li>?
  const item = event.target.closest("li");
  if (!item || !list.contains(item)) return;

  console.log("You clicked:", item.textContent);
});

Mit diesem einen Handler wird jedes aktuelle und zukünftige <li> innerhalb von #menu abgedeckt — Sie müssen nie wieder Listener an einzelnen Elementen binden (oder erneut binden). Weitere verwandte Techniken finden Sie in Event Handling im DOM und Benutzerdefinierte Ereignisse auslösen.

Fazit

Event Propagation bewegt ein Ereignis abwärts (Capturing) und dann aufwärts (Bubbling) durch den DOM. Standardmäßig werden Handler während des Bubblings ausgeführt; übergeben Sie true (oder { capture: true }), um während des Capturings zu lauschen. Verwenden Sie event.target, um das Element zu finden, das das Ereignis ausgelöst hat, event.currentTarget für das Element, das es gerade verarbeitet, und stopPropagation() / stopImmediatePropagation(), um zu begrenzen, wie weit es wandert. Beherrschen Sie diese Konzepte, und Sie können saubere, effiziente Interaktionen aufbauen — vor allem durch Event-Delegation — ohne Listener über Ihre gesamte Seite zu verstreuen.

Übungen

Übung

Welche Eigenschaft gibt das Element an, bei dem ein Ereignis ursprünglich aufgetreten ist, unabhängig davon, welcher Handler gerade ausgeführt wird?

event.currentTargetevent.targetevent.sourcethis.parentNode

Übung

In welcher Phase werden Listener, die mit addEventListener hinzugefügt wurden, standardmäßig ausgeführt?

Die Capturing-PhaseDie Bubbling-PhaseBeide Phasen gleichzeitigKeine — die Phase muss immer explizit angegeben werden