Gehen wir mal von folgendem HTML aus:
<body>
<div>
<p>Hallo</p>
</div>
</body>
Wenn du jetzt im Browser auf das Wort "Hallo" klickst, passiert folgendes:
- Für das
<p>
-Element prüfen, ob ein Event-Listener für das "click"-Event registriert wurde. Wenn ja: ausführen
- Für das
<div>
-Element prüfen, ob ein Event-Listener für das "click"-Event registriert wurde. Wenn ja: ausführen
- Für das
<body>
-Element prüfen, ... usw.
Das geht bis zum html-Element und danach auch noch
window.document
und
window
.
Wenn du also für jedes Element hier einen Event-Listener registrierst, werden alle ausgeführt, in der Reihenfolge von unten (
<p>
) nach oben (
window
). Das ist die "bubbling phase" und wird standardmäßig verwendet.
Danach genau das gleiche nochmal in umgekehrter Reihenfolge, von
window
bis zum
<p>
. Das ist die "capture phase" und wird so verwendet:
element.addEventListener(eventName, eventHandler, true)
// oder nicht-IE-Browsern:
element.addEventListener(eventName, eventHandler, { capture: true })
(Die capture phase verwende ich zumindest so gut wie nie)
Mit
event.stopPropagation()
kannst du diese Kette unterbrechen.
Ein Beispiel hier:
Du hast ein Klick-Event am
<body>
registriert, um z. B. ein Menü oder ein Popup zu schließen. Das wird quasi bei jedem Klick auf jedes beliebige Element gefeuert, da die Prüfung früher oder später ja beim
<body>
ankommen wird.
Bei einem Klick innerhalb des Menüs oder Popups soll sich dieses aber z. B. nicht schließen. Dazu registrierst du ein weiteres Event beim Element, das das gesamte Menü/Popup darstellt und rufst dort
event.stopPropagation()
auf. Das verhindert, dass der Event-Handler beim
<body>
gefeuert wird. Und somit bleibt das Menü/Popup offen.
Hab ich das verständlich zusammengefasst? 😁