Propagacja zdarzeń w JavaScript

Oprócz bubbling zdarzeń istnieje również propagacja w dół. W rzeczywistości zdarzenie najpierw przechodzi od góry do dołu (faza capturing), dociera do naszego elementu (faza target), a dopiero potem zaczyna wypływać (faza bubbling).

Aby dodać obsługę zdarzenia uwzględniając fazę capturing w addEventListener istnieje trzeci opcjonalny parametr. Jeśli jest równy true - zdarzenie zostanie wywołane w fazie capturing, a jeśli false - w fazie bubbling (jest to wartość domyślna). Spójrzmy na przykład:

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

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

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

Możesz to sprawdzić: