capturing and bubbling (Einfangen und Blubbern)

  • Tritt ein Event an einem Event Target auf, so können auch die Eltern Elemente im DOM Baum darauf reagieren.
  • Von der Reihenfolge kann erst der Handler der Eltern, oder der des Targets aufgerufen werden.
  • Um beide Reihenfolgen zu ermöglichen startet das Event bei der Wurzel und läuft durch bis zum Target (Capturing) und zurück zur Wurzel (Bubbling).
  • Je nach Einstellung wird es schon beim Capturing (muss explizit bei addEventListener angegeben werden) oder erst beim Bubbling (Default Einstellung) behandelt.
  • Normalerweise wird also erst die Handler Funktion des Targets ausgeführt, dann die der Eltern des Targets, und zum Schluss die der Wurzel (bzw. darüber noch document und window).
  • eventObjekt.stopPropagation() führt dazu, dass das Event nicht mehr weitergereicht wird (kann unerwünschtes Verhalten verhindern).

Grafik

HTML<div id="box"><button>Click me</button></div>

CSS#box {
  background-color: green;
}

JavaScriptlet box = document.getElementById('box');
box.addEventListener('click', divHi); // bubbling
// box.addEventListener("click", divHi, true); // capturing
function divHi(event) {
  console.log('div: Hi');
  console.log(event.currentTarget);
  console.log(event.target);
}
let button = document.getElementsByTagName('button')[0];
button.addEventListener('click', buttonHi);
function buttonHi(event) {
  console.log('button: Hi');
  // event.stopPropagation();
}