JavaScriptda Hodisa Ko'tarilishi

O'zingizni bir nechta bir-biriga joylashtirilgan bloklaringiz bor deb tasavvur qiling:

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

Divlarimizga havolalarni o'zgaruvchilarga olaylik:

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

Endi ularga bosish hodisasi qayta ishlovchilarini qo'shamiz:

elem1.addEventListener('click', function() {
	alert('yashil');
});
elem2.addEventListener('click', function() {
	alert('havo rang');
});
elem3.addEventListener('click', function() {
	alert('qizil');
});

Bloklarimizga bir qator CSS qo'shib, ularni ekranda ko'rsatamiz:

Endi eng ichki qizil blokni bosing - va siz hodisaning avval qizil blokda, keyin havo rang blokda, keyin yashil blokda ishlashini ko'rasiz. Bu mantiqiy, chunki ichki blokni bosganingizda, siz bir vaqtning o'zida barcha tashqi bloklarni ham bosasiz.

Ya'ni ma'lum bo'ladiki, siz eng ichki blokni bosganingizda, bosish hodisasi avval unda paydo bo'ladi, keyin uning ota-onasida, keyin uning ota-onasining ota-onasida va hokazo, eng yuqori qismga yetguncha ishlaydi.

Bunday xatti-harakat hodisa ko'tarilishi (bubbling) deb ataladi - havoda pufakchalar ko'tarilishiga o'xshab. Xuddi pufakcha kabi, bizning hodisamiz yuqoriga ko'tarilgandek, har safar yuqoriroq bloklarda ishlaydi.

Hodisa ko'tarilishini namoyish etadigan kodni mustaqil yozing. Unda turli xil hodisa turlarining ko'tarilishini tekshiring.

Hamma hodisalar ko'tarila olmaydi. Eksperimental tarzda ko'tarilmaydigan kamida bitta hodisa toping.