Ngritja e Ngjarjeve në JavaScript

Imagjinoni që keni disa blloqe të vendosura njëra brenda tjetrës:

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

Le t'i marrim referencat e div-eve tona në variabla:

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

Dhe tani le t'u caktojmë atyre përpunues të klikimeve:

javascriptelem1.addEventListener('click', function() {
  alert('jeshile');
});
elem2.addEventListener('click', function() {
  alert('blu');
});
elem3.addEventListener('click', function() {
  alert('e kuqe');
});

Le t'i shfaqim blloqet tona në ekran, duke u shtuar atyre disa CSS:

Tani klikoni në bllokun më të brendshëm të kuq - dhe do të shihni se si ngjarja fillimisht do të aktivizohet në bllokun e kuq, pastaj në atë blu, e më pas në të gjelbër. Dhe kjo është logjike, sepse duke klikuar në bllokun e brendshëm, ju njëkohësisht klikoni në të gjitha blloqet e jashtme.

Kjo do të thotë që kur ju klikoni në bllokun më të brendshëm, ngjarja e klikimit lind fillimisht në të, pastaj aktivizohet në prindin e tij, në prindin e atij prindi e kështu me radhë, derisa të arrijë në majë.

Kjo sjellje quhet ngritje (bubbling) e ngjarjeve - në analogji me ngjitjen e një flluske ajri nga fundi. Ashtu si flluska, ngjarja jonë sikur po ngjitet lart, duke u aktivizuar çdo herë në blloqe më të larta.