Bubljenje događaja u JavaScript-u

Zamislite da imate nekoliko blokova ugniježđenih jedan u drugi:

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

Uzmićemo reference na naše div-ove u promenljive:

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

A sada ćemo im dodati osluškivače klikova:

javascriptelem1.addEventListener('click', function() {
  alert('zelena');
});
elem2.addEventListener('click', function() {
  alert('plava');
});
elem3.addEventListener('click', function() {
  alert('crvena');
});

Prikažimo naše blokove na ekranu, dodajući im nešto CSS-a:

Sada kliknite na najunutrašnji crveni blok - i videćete kako će se događaj prvo okidaši na crvenom bloku, zatim na plavom, pa na zelenom. I to je logično, jer klikajući na unutrašnji blok, istovremeno klikćete na sve spoljašnje.

To jest, ispada da kada kliknete na najunutrašnji blok, događaj klika nastaje prvo u njemu, zatim se odašilje u njegovom roditelju, u roditelju njegovog roditelja i tako dalje, sve dok ne stigne do samog vrha.

Ovo ponašanje se zove bubljenjem (bubbling) događaja - po analogiji sa bubljenjem mehurića vazduha sa dna. Kao što i mehurić, naš događaj kao da isplivava na površinu, svaki put se odašiljući na višim blokovima.