Event Bubbling und Event Delegation

Events wandern oft vom geklickten Element zu den Eltern hoch – das nennt man Bubbling. Genau das nutzt Event Delegation: Ein Listener am Eltern-Element reicht für viele Kinder.

Was ist Event Bubbling?

Klickst du auf ein Element, startet das Event dort – und steigt danach die Eltern-Kette nach oben. Wie eine Luftblase im Wasser: vom Kind zum Eltern-Element, weiter zum Großeltern-Element, bis zum Document.

Deshalb kann ein Listener am Eltern-Element auch reagieren, wenn du eigentlich auf ein Kind geklickt hast.

HTML – Karte mit Button

1<div id="karte">
2    <button id="btn">Klick</button>
3</div>

JavaScript – beide hören auf click

1const karte = document.getElementById("karte");
2const btn = document.getElementById("btn");
3
4karte.addEventListener("click", function() {
5    console.log("Karte");
6});
7
8btn.addEventListener("click", function() {
9    console.log("Button");
10});

Ausgabe

Karte

Klicke auf den Button – beide Listener feuern.

Reihenfolge beim Event Bubbling

Die Reihenfolge ist immer gleich: zuerst das Element, das du wirklich angeklickt hast, danach seine Eltern von innen nach außen.

Beispiel: Button in einer Karte in einem äußeren Bereich → zuerst Button, dann Karte, dann äußerer Bereich.

Reihenfolge beim Klick auf den Button

1// Klick auf den Button:
2// 1. Button (Ziel)
3// 2. Innere Karte
4// 3. Äußerer Bereich

Ausgabe

Äußerer Bereich

Innere Karte

Klicke auf den Button und sieh die Reihenfolge.

Bubbling mit stopPropagation() stoppen

Manchmal soll nur das Kind reagieren – nicht auch noch der Eltern-Listener. Mit event.stopPropagation() stoppst du das Weiterwandern nach oben.

HTML – Karte mit Button

1<div id="karte">
2    <button id="btn">Details</button>
3</div>

JavaScript – Bubbling stoppen

1const karte = document.getElementById("karte");
2const btn = document.getElementById("btn");
3
4karte.addEventListener("click", function() {
5    console.log("Karte");
6});
7
8btn.addEventListener("click", function(event) {
9    event.stopPropagation();
10    console.log("Nur Button");
11});

Ausgabe

Karte

Klicke Button vs. Karte – beim Button stoppt stopPropagation().

Was ist Event Delegation?

Bei Event Delegation setzt du einen Listener auf ein Elternelement statt viele Listener auf jedes Kind.

Das spart Code und funktioniert auch für Elemente, die später erst erzeugt werden – weil der Listener schon am Eltern-Element hängt.

HTML – Liste

1<ul id="liste">
2    <li><button class="item">Aufgabe 1</button></li>
3    <li><button class="item">Aufgabe 2</button></li>
4</ul>

JavaScript – ein Listener für alle

1const liste = document.getElementById("liste");
2
3liste.addEventListener("click", function(event) {
4    if (event.target.matches(".item")) {
5        console.log("Geklickt:", event.target.textContent);
6    }
7});

Ausgabe

Ein Listener am Eltern-Element – klicke eine Aufgabe.

Events über ein Elternelement steuern

Praktisch: Du hängst den Listener an die Liste oder den Container. Beim Klick prüfst du mit event.target, welches Kind getroffen wurde.

HTML – Navigation

1<ul id="nav">
2    <li>Start</li>
3    <li>Kurse</li>
4    <li>Kontakt</li>
5</ul>

JavaScript – Listener am Eltern-Element

1const nav = document.getElementById("nav");
2
3nav.addEventListener("click", function(event) {
4    if (event.target.tagName === "LI") {
5        console.log("Punkt:", event.target.textContent);
6    }
7});

Ausgabe

Start
Kurse
Kontakt

Listener hängt an der Liste, nicht an jedem li.

Nur bestimmte Elemente mit matches() auswählen

In einem Container gibt es oft verschiedene Klickziele. Mit event.target.matches(".loeschen") prüfst du, ob genau das richtige Element (oder Selektor) getroffen wurde.

Passt es nicht, ignorierst du den Klick – so reagierst du nur auf die Buttons, die du meinst.

JavaScript – matches()

1liste.addEventListener("click", function(event) {
2    if (event.target.matches(".loeschen")) {
3        console.log("Löschen:", event.target.dataset.name);
4    }
5});

Ausgabe

Datei.pdf

Notiz.txt

Nur Klicks auf .loeschen werden ausgewertet.

Dynamisch erzeugte Elemente steuern

Neue Elemente, die du per JavaScript erzeugst, haben oft noch keinen eigenen Listener. Mit Delegation ist das egal: Der Listener am Eltern-Element gilt auch für Kinder, die erst später dazukommen.

HTML – Liste + Button

1<button id="addBtn">Hinzufügen</button>
2<ul id="liste"></ul>

JavaScript – Delegation für neue Elemente

1const liste = document.getElementById("liste");
2const addBtn = document.getElementById("addBtn");
3
4liste.addEventListener("click", function(event) {
5    if (event.target.matches(".item")) {
6        console.log(event.target.textContent);
7    }
8});
9
10addBtn.addEventListener("click", function() {
11    const li = document.createElement("li");
12    const btn = document.createElement("button");
13    btn.className = "item";
14    btn.textContent = "Neuer Eintrag";
15    li.appendChild(btn);
16    liste.appendChild(li);
17});

Ausgabe

Neue Einträge brauchen keinen eigenen Listener – Delegation reicht.

Merksatz: Events blubbern nach oben. Mit Delegation reicht ein Eltern-Listener; mit matches() filterst du die richtigen Kinder – auch neue.

Im nächsten Kapitel lernst du: Event Listener verwalten