JavaScript-də hadisələrin qalxması

Təsəvvür edin ki, sizin bir-birinizin içinə daxil edilmiş bir neçə blokunuz var:

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

Div-lərimizə istinadları dəyişənlərə əldə edək:

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

İndi isə onların üzərinə klik hadisəsi işləyiciləri əlavə edək:

elem1.addEventListener('click', function() {
	alert('yaşıl');
});
elem2.addEventListener('click', function() {
	alert('mavi');
});
elem3.addEventListener('click', function() {
	alert('qırmızı');
});

Bloklarımıza bir az CSS əlavə edərək, onları ekranda çıxaraq:

İndi ən daxili qırmızı bloka klik edin - və görəcəksiniz ki, hadisə əvvəlcə qırmızı blokda, sonra mavidə, sonra isə yaşıl blokda işləyəcək. Və bu məntiqlidir, çünki daxili bloka klik edərkən, eyni zamanda bütün xarici bloklara da klik etmiş olursunuz.

Yəni belə olur ki, ən daxili bloka klik edəndə, klik hadisəsi əvvəlcə orada yaranır, sonra onun valideynində işləyir, onun valideyninin valideynində və s., nəhayət, ən yuxarıya çatana qədər davam edir.

Bu davranışa hadisələrin qalxması (bubbling) deyilir - havadan qabarcığın dibdən qalxmasına bənzətmə ilə. Eyni qabarcıq kimi, bizim hadisəmiz də yuxarı qalxır kimi, hər dəfə daha yüksək bloklarda işləyir.

Müstəqil olaraq hadisələrin qalxmasını nümayiş etdirən kodu yazın. Müxtəlif tipli hadisələrin qalxmasını onun üzərində yoxlayın.

Bütün hadisələr qalxa bilməz. Təcrübi olaraq qalxmayan ən azı bir hadisə tapın.