Skip to main content
Event Propagation beschreibt den Prozess, wie sich Events (wie Klicks oder Tastatureingaben) durch den DOM-Baum einer Webseite ausbreiten - zunächst in der Capturing-Phase von oben nach unten, dann in der Bubbling-Phase von unten nach oben durch die verschachtelten HTML-Elemente. Es passiert folgendes, wenn beispielweise ein Click Event erstellt wird:
1

`document`

Das Click Event wird an das document angehängt.
document
2

Capturing Phase

Das Event durchläuft jedes Parent-Element des Target-Elements (Element mit dem Event-Listener).
Capturing Phase
3

Target Phase

In der Target Phase werden die Events beim Target verarbeitet. Das machen wir mit Event-Listeners.
Target Phase
4

Bubbling Phase

Das Event durchläuft nun wieder jedes Parent-Element bis zum document. Wenn das passiert ist es für JavaScript so, als ob das Event auch in einem der Parent-Elemente passiert wäre.Das heisst wir können an unsere Parent-Elemente ebenfalls Event-Listener anhängen. Diese werden auch dann aufgerufen, wenn ein Child-Element das Target-Element war.
Bubbling Phase
Mit einem kleinen Trick können wir uns das auch in der Capturing Phase zu nutze machen.

​
Bubbling Phase

Um die Events in der Bubbling Phase abzufangen, müssen wir Event-Handler an die Parent-Elemente anhängen. 
const randomInt = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min);
const randomColor = () =>
  `rgb(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)})`;

document.querySelector('.nav__link').addEventListener('click', (e) => {
  this.style.backgroundColor = randomColor();
});

document.querySelector('.nav__links').addEventListener('click', (e) => {
  this.style.backgroundColor = randomColor();
});

document.querySelector('.nav').addEventListener('click', (e) => {
  this.style.backgroundColor = randomColor();
});
Wenn wir nun auf ein Element mit der Klasse .nav__link klicken, werden sowohl bei diesem Element, als auch .nav__links und .nav die Hintergrundfarben verändert.

​
target und currentTarget

Das Target-Element ist bei jedem der obigen Event-Listener gleich. Jedoch können wir auf das eigentliche Target-Element über currentTarget zugreifen.
currentTarget entspricht im Event-Listener this.

​
Propagation stoppen

Um dieses Verhalten zu verhindern können wir im Target-Element die Methode stopPropagation auf dem Event aufrufen. 
document.querySelector('.nav__link').addEventListener('click', function (e) {
  this.style.backgroundColor = randomColor();
  e.stopPropagation();
});

​
Capturing Phase

Wir können das Standardverhalten des Event-Listeners mit einem Argument überschreiben: 
document.querySelector('.nav').addEventListener('click', (e) => {
  this.style.backgroundColor = randomColor();
}, true);
Jetzt wird das Event in der Capturing Phase abgefangen und nicht in der Bubbling Phase.

Event Delegation