Bublanie a zachytávanie udalostí v JavaScripte

Okrem bublania udalostí existuje aj prechod do hĺbky (capturing). V skutočnosti udalosť najprv prechádza zhora nadol (fáza zachytávania), dosiahne náš prvok (fáza cieľa) a až potom začne bublať (fáza bublania).

Na to, aby sme nastavili obslužný program udalosti s ohľadom na fázu zachytávania, má addEventListener tretí voliteľný parameter. Ak je rovný true - udalosť sa spustí vo fáze zachytávania, a ak false - vo fáze bublania (toto je predvolené). Pozrime sa na príklad:

javascriptelem1.addEventListener('click', function() {
  console.log('zelený - zachytávanie');
}, true);
elem1.addEventListener('click', function() {
  console.log('zelený - bublanie');
}, false);

elem2.addEventListener('click', function() {
  console.log('modrý - zachytávanie');
}, true);
elem2.addEventListener('click', function() {
  console.log('modrý - bublanie');
}, false);

elem3.addEventListener('click', function() {
  console.log('červený - zachytávanie');
}, true);
elem3.addEventListener('click', function() {
  console.log('červený - bublanie');
}, false);

Môžete vyskúšať: