Event Capturing in JavaScript

Neben dem Hochpropagieren (Bubbling) von Events gibt es auch noch das Eintauchen (Capturing). Tatsächlich läuft ein Event zuerst von oben nach unten (Capturing-Phase), erreicht unser Element (Target-Phase) und beginnt erst dann hochzupropagieren (Bubbling-Phase).

Um einen Event-Handler für die Capturing-Phase zu registrieren, gibt es in addEventListener einen dritten optionalen Parameter. Wenn er true ist, wird der Event-Handler in der Capturing-Phase ausgelöst, und wenn er false ist, in der Bubbling-Phase (das ist der Standardwert). Sehen wir uns ein Beispiel an:

javascriptelem1.addEventListener('click', function() {
  console.log('grün - Capturing');
}, true);
elem1.addEventListener('click', function() {
  console.log('grün - Bubbling');
}, false);

elem2.addEventListener('click', function() {
  console.log('blau - Capturing');
}, true);
elem2.addEventListener('click', function() {
  console.log('blau - Bubbling');
}, false);

elem3.addEventListener('click', function() {
  console.log('rot - Capturing');
}, true);
elem3.addEventListener('click', function() {
  console.log('rot - Bubbling');
}, false);

Sie können es selbst testen: