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) деп аталады - ауа көпіршігінің түбінен көтерілуіне ұқсас. Біздің оқиға да көпіршек сияқты жоғары қарай көтеріліп, әр жолы жоғарырақ блоктарда орын алады.

Оқиғалардың көтерілуін көрсететін кодты өзіңіз жаз. Оның үстіне әртүрлі типтегі оқиғалардың көтерілуін тексер.

Барлық оқиғалар көтеріле алмайды. Тәжірибе жүзінде көтерілмейтін кем дегенде бір оқиғаны тап.