Event Bubbling and Capturing in JavaScript

Pored šírenja događaja postoji i prodiranje (capturing). Zapravo, događaj prvo ide odozgo na dole (faza hvatanja), stiže do našeg elementa (faza cilja) i tek onda počinje da se šíri (faza šírenja).

Da bismo postavili rukovaoc događaja uzimajući u obzir fazu hvatanja, u addEventListener postoji treći opcioni parametar. Ako je jednak true - događaj će se aktivirati u fazi hvatanja, a ako je false - u fazi šírenja (ovo je podrazumevano). Pogledajmo na primeru:

javascriptelem1.addEventListener('click', function() {
  console.log('zeleni - prodiranje');
}, true);
elem1.addEventListener('click', function() {
  console.log('zeleni - šírenje');
}, false);

elem2.addEventListener('click', function() {
  console.log('plavi - prodiranje');
}, true);
elem2.addEventListener('click', function() {
  console.log('plavi - šírenje');
}, false);

elem3.addEventListener('click', function() {
  console.log('crveni - prodiranje');
}, true);
elem3.addEventListener('click', function() {
  console.log('crveni - šírenje');
}, false);

Možete proveriti: