Poglabljanje v dogodke v JavaScript

Poleg bubblinga dogodkov obstaja tudi poglabljanje. Pravzaprav se dogodek najprej odvija od zgoraj navzdol (faza zajemanja), doseže naš element (faza cilja) in šele nato se začne pojavljati (faza bubblinga).

Da bi obravnavali dogodek ob upoštevanju faze zajemanja, ima addEventListener tretji neobvezni parameter. Če je enak true - se bo dogodek sprožil v fazi zajemanja, če pa je false - v fazi bubblinga (to je privzeto). Poglejmo si primer:

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

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

elem3.addEventListener('click', function() {
  console.log('rdeče - poglabljanje');
}, true);
elem3.addEventListener('click', function() {
  console.log('rdeče - bubbling');
}, false);

Lahko preverite: