Was ist Event Bubbling in Javascript?

Event Bubbling ist ein zentraler Begriff in JavaScript und bezeichnet das Durchreichen eines Events bzw. einer Ereignisauslösung von einem Element zu seinem obergeordneten Element in der HTML-Struktur (DOM). Dies geschieht, wenn ein Event auf einem Element innerhalb einer verschachtelten Struktur ausgelöst wird. Anstatt nur an diesem spezifischen Element zu wirken, wird das Event "aufgeblasen" (wie eine Blase, daher der Begriff "Bubbling") und auf alle übergeordneten Elemente übertragen.

Denken Sie zum Beispiel an eine HTML-Struktur, in der ein Button in einem Div-Tag platziert ist. Wenn Sie auf diesen Button klicken (ein Click-Event auslösen), wird dieses Event nicht nur von dem Button selbst, sondern auch von dem Div-Tag und letztlich dem gesamten Dokument wahrgenommen.

Hier ist ein einfaches Beispiel:

document.querySelector("button").addEventListener("click", () => {
    console.log("Button wurde geklickt");
});

document.querySelector("div").addEventListener("click", () => {
    console.log("Click event wurde auch vom Div bemerkt");
});

Im obigen Beispiel wird, wenn Sie auf den Button klicken, zuerst "Button wurde geklickt" in der Konsole ausgegeben, und dann "Click event wurde auch vom Div bemerkt". Dies zeigt das Prinzip des Event Bubbling.

Es ist wichtig zu beachten, dass Sie das Event Bubbling in manchen Fällen unterbinden möchten. Sie können dies tun, indem Sie die Methode event.stopPropagation() in der Funktion verwenden, die Sie dem Event Listener hinzufügen.

document.querySelector("button").addEventListener("click", (event) => {
    event.stopPropagation();
    console.log("Button wurde geklickt, aber Event Bubbling wurde gestoppt");
});

In diesem Fall wird das Click-Event nur auf dem Button wirksam und das Bubbling wird gestoppt. Denken Sie daran, dass das Stoppen von Event Bubbling sorgfältig eingesetzt werden sollte, da es die Funktionsweise von anderen Teilen Ihrer Anwendung beeinträchtigen kann, die auf diese Events warten.

Zusammenfassend lässt sich sagen, dass Event Bubbling ein kraftvolles Konzept ist, das Ihnen hilft, komplexe Interaktionen in Ihrer Webanwendung zu handhaben. Aber wie bei jedem Werkzeug, sollte es mit Sorgfalt und Verständnis verwendet werden.