Event capturing in JavaScript

Naast event bubbling is er ook capturing. Eigenlijk gaat een event eerst van boven naar beneden (capturing-fase), bereikt het ons element (target-fase) en begint pas daarna te bubbelen (bubbling-fase).

Om een event handler toe te voegen met inachtneming van de capturing-fase, heeft addEventListener een derde optionele parameter. Als deze gelijk is aan true - wordt het event geactiveerd tijdens de capturing-fase, en als false - tijdens de bubbling-fase (dit is de standaardinstelling). Laten we een voorbeeld bekijken:

javascriptelem1.addEventListener('click', function() {
  console.log('groen - capturing');
}, true);
elem1.addEventListener('click', function() {
  console.log('groen - bubbling');
}, false);

elem2.addEventListener('click', function() {
  console.log('blauw - capturing');
}, true);
elem2.addEventListener('click', function() {
  console.log('blauw - bubbling');
}, false);

elem3.addEventListener('click', function() {
  console.log('rood - capturing');
}, true);
elem3.addEventListener('click', function() {
  console.log('rood - bubbling');
}, false);

Je kunt het testen: