Poganjanje dogodkov v JavaScript

Predstavljajte si, da imate več medsebojno ugnezdenih blokov:

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

Pridobimo reference na naše div elemente v spremenljivke:

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

In sedaj jim dodelimo poslušalce klikov:

javascriptelem1.addEventListener('click', function() {
  alert('zelena');
});
elem2.addEventListener('click', function() {
  alert('modra');
});
elem3.addEventListener('click', function() {
  alert('rdeča');
});

Prikažimo naše bloke na zaslonu z dodanimi CSS stilovi:

Kliknite sedaj na najbolj notranji rdeči blok - in videli boste, kako se bo dogodek najprej sprožil v rdečem bloku, nato v modrem, nato v zelenem. In to je logično, saj s klikom na notranji blok, hkrati kliknete na vse zunanje.

To pomeni, da ko kliknete na najbolj notranji blok, se dogodek klika pojavi najprej v njem, nato se sproži v njegovem staršu, v staršu njegovega starša in tako naprej, dokler ne doseže vrha.

To vedenje se imenuje poganjanje (bubbling) dogodkov - po analogiji z mehurčkom zraka, ki se dviga z dna. Prav tako kot mehurček, se tudi naš dogodek kot bi izplaval na vrh, vsakič ko se sproži na višjih blokih.