JavaScript'те окуялардын көтөрүлүшү

Өзүңүздүн бир нече бири-бирине киргизилген блокторуңуз бар экенин элестетиңиз:

<div id="elem1">
	<div id="elem2">
		<div id="elem3"></div>
	</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) деп аталат - ауа көпүрөгүнүн түбүнөн көтөрүлүшүнө окшош. Көпүрөк сыяктуу эле, биздин окуябыз жогору көтөрүлүп, ар дайым жогорку блоктордо ишке ашып турат.

Өз алдынча окуялардын көтөрүлүшүн көрсөткөн кодду жазыңыз. Анда ар кандай түрдөгү окуялардын көтөрүлүшүн текшериңиз.

Баары окуялар көтөрүлбөйт. Эксперимент жүзүндө көтөрүлбөгөн бир дагы окуяны табыңыз.