Bublanie udalostí v JavaScripte

Predstavte si, že máte niekoľko vnorených blokov:

html<div id="elem1">
  <div id="elem2">
    <div id="elem3"></div>
  </div>
</div>

Získame odkazy na naše divy do premenných:

javascriptlet elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');

A teraz na ne pridáme obsluhy kliknutí:

javascriptelem1.addEventListener('click', function() {
  alert('zelený');
});
elem2.addEventListener('click', function() {
  alert('modrý');
});
elem3.addEventListener('click', function() {
  alert('červený');
});

Zobrazíme naše bloky na obrazovke, pridaním nejakého CSS:

Kliknite teraz na najvnútornejší červený blok - a uvidíte, ako udalosť najprv zbehne v červenom bloku, potom v modrom, potom v zelenom. A to je logické, pretože kliknutím na vnútorný blok zároveň klikáte na všetky vonkajšie.

To znamená, že keď kliknete na najvnútornejší blok, udalosť kliknutia vznikne najprv v ňom, potom sa spustí v jeho rodičovi, v rodičovi jeho rodiča a tak ďalej, kým nedosiahne úplný vrchol.

Toto správanie sa nazýva bublanie (bubbling) udalostí - analogicky s bublinkou vzduchu, ktorá stúpa zo dna. Rovnako ako bublina, naša udalosť akoby vyplávala nahor, zakaždým sa spúšťajúc na vyšších blokoch.