Event.stopPropagation()

Gehen wir mal von folgendem HTML aus:

HTML: 
<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:

Javascript: 
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? 😁
 
Zurück
Oben Unten