Ngritja e Ngjarjeve në JavaScript

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

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

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

let 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:

elem1.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.

Shkruani në mënyrë të pavarur kodin që do të demonstronte ngritjen e ngjarjeve. Testoni në të ngritjen e llojeve të ndryshme të ngjarjeve.

Jo të gjitha ngjarjet mund të ngrihen. Eksperimentalisht gjeni të paktën një ngjarje që nuk do të ngrihet.