Вокъеъи рӯйдодҳо дар 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) рӯйдодҳо номида мешавад - ба монанди вокъеъи ҳавои ҳабба аз қаъри об. Ҳамин тавр, мисли ҳабба, рӯйдоди мо гӯё ба боло меояд, ҳар дафъа дар блокҳои баландтар кор мекунад.

Худ код нависед, ки вокъеъи рӯйдодҳоро намоиш диҳад. Рӯйи он санҷед вокъеъи намудҳои гуногуни рӯйдодҳо.

Ҳама рӯйдодҳо наметавонанд вокъеъ кунанд. Таҷрибавӣ ҳадди ақал як рӯйдодро ёбед, ки вокъеъ намекунад.