JavaScript-däki hadysalaryň ýokaryk göterilmegi

Bir-biriň içine gurnalan birnäçe bloguňyz bar diýeliň:

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

Divlerimize ýönekeý göçürmeleri alyň:

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

Indi olara çykyş işleýjileri goýuň:

elem1.addEventListener('click', function() {
	alert('ýaşyl');
});
elem2.addEventListener('click', function() {
	alert('gök');
});
elem3.addEventListener('click', function() {
	alert('gyzyl');
});

Bloglarymyzy ekrana çykaryň, olara käbir CSS goşuň:

Indi iň içindäki gyzyl blogy basyň - we hadysanyň ilki gyzyl blogda, soňra gökde, soňra ýaşylda işleýändigini görersiňiz. Bu maddy, sebäbi içerki blogy basanyňyzda, siz şol bir wagtyň özünde ähli daşarky bloglara hem basýarsyňyz.

Ýagny, iň içerki blogy basanyňyzda, basylma hadysasy ilki onda döreýär, soňra onuň ejesinde, ejesiniň ejesinde we şuňa meňzeş ýokaryk ýokaryk gitmekçilikde işleýär.

Bu ýagdaý hadysalaryň ýokaryk göterilmegi (bubbling) diýilýär - suwunyň dibinden hawa köpüginiň ýokaryk göterilmegine meňzeş. Köpük ýaly, hadysamyz ýokaryk göterilýär, her gezek has ýokarky bloglarda işleýär.

Hadysalaryň ýokaryk göterilmegini görkezýän kody özbaşyna ýazyň. Onuň üstünde dürli görnüşli hadysalaryň ýokaryk göterilmegini barlaň.

Ähli hadysalar ýokaryk göterilip bilmez. Tejribeli ýagdaýda ýokaryk göterilmejek bolan azyndan bir hadysany tapyň.