JavaScriptда вокеаларнинг кўтарилиши

Ўзингизда бир-бирининг ичига қўйилган бир нечта блоклар борлигини тасаввур қилинг:

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

Дивларга ҳаволани ўзгаргувчиларга оламиз:

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

Энди уларга клик ишловчиларини бирламчиз:

elem1.addEventListener('click', function() {
	alert('яшил');
});
elem2.addEventListener('click', function() {
	alert('кўк');
});
elem3.addEventListener('click', function() {
	alert('қизил');
});

Блокларимизга бир миқдор CSS қўшиб, экранга чиқарамиз:

Энди энг ички қизил блокни босинг - ва сиз вокеа аввал қизил блокда, сўнгра кўк блокда, сўнгра яшил блокда ишлаганини кўрурасанз. Ва бу мантиқий, чунки ички блокни босганда, сиз бир вақтнинг ўзида барча ташқи блокларни босияпсиз.

Яъни маълум бўлдики, сиз энг ички блокни босганда, клик вокеа аввал унда пайдо бўлади, сўнгра унинг ота-онасида ишлайди, унинг ота-онасининг ота-онасида ва шу каби энг юқорига етгунча давом этади.

Бундай ҳаракат вокеаларнинг кўтарилиши (bubbling) деб аталади - ҳаво пузырчагининг тубидан кўтарилишига ўхшаш. Шу тайёр, пузырчак каби, бизнинг вокеамиз ўксин юқорига қараб кўтарилаяпган, ҳар сафар анча юқори блокларда ишлаяптан.

Вокеаларнинг кўтарилишини намойиш этадиган кодни ўзингиз ёзинг. Унда турли хил вокеа турларининг кўтарилишини текшириб кўринг.

Ҳамма вокеалар кўтарилмайди. Тажриба жараёнида кам деганда битта кўтарилмайдиган вокеани топинг.