Bublání a zachytávání událostí v JavaScriptu

Kromě bublání událostí existuje také zachytávání. Ve skutečnosti událost nejprve postupuje shora dolů (fáze zachytávání), dosáhne našeho prvku (cílová fáze) a teprve poté začne bublat (fáze bublání).

Pro přidání obslužné rutiny události s ohledem na fázi zachytávání má addEventListener třetí volitelný parametr. Pokud je roven true – událost se aktivuje ve fázi zachytávání, a pokud false – ve fázi bublání (to je výchozí nastavení). Podívejme se na příklad:

javascriptelem1.addEventListener('click', function() {
  console.log('zelený - zachytávání');
}, true);
elem1.addEventListener('click', function() {
  console.log('zelený - bublání');
}, false);

elem2.addEventListener('click', function() {
  console.log('modrý - zachytávání');
}, true);
elem2.addEventListener('click', function() {
  console.log('modrý - bublání');
}, false);

elem3.addEventListener('click', function() {
  console.log('červený - zachytávání');
}, true);
elem3.addEventListener('click', function() {
  console.log('červený - bublání');
}, false);

Můžete vyzkoušet: