Notikumu uzpeldēšana JavaScript

Iedomājieties, ka jums ir vairāki viens otrā ieguldīti bloki:

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

Iegūsim atsauces uz mūsu div mainīgajos:

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

Un tagad pievienosim tiem klikšķa notikumu apstrādātājus:

elem1.addEventListener('click', function() {
	alert('zaļš');
});
elem2.addEventListener('click', function() {
	alert('zils');
});
elem3.addEventListener('click', function() {
	alert('sarkans');
});

Parādīsim mūsu blokus ekrānā, pievienojot tiem nedaudz CSS:

Tagad noklikšķiniet uz visvairāk iekšējā sarkanā bloka - un jūs redzēsiet, kā notikums vispirms iedarbosies sarkanajā blokā, tad zilajā, tad zaļajā. Un tas ir loģiski, jo, noklikšķinot uz iekšējā bloka, jūs vienlaikus noklikšķināt uz visiem ārējiem.

Tas nozīmē, ka, noklikšķinot uz visvairāk iekšējā bloka, klikšķa notikums rodas vispirms tajā, pēc tam tas iedarbojas tā vecākajā, vecākā vecākajā un tā tālāk, līdz tas sasniedz pašu augšu.

Šādu uzvedību sauc par notikumu uzpeldēšanu (bubbling) - pēc analoģijas ar gaisa burbuļa uzpeldēšanu no apakšas. Tāpat kā burbulis, mūsu notikums it kā uzpeld augšup, katru reizi iedarbodamies uz augstākiem blokiem.

Patstāvīgi uzrakstiet kodu, kas demonstrēs notikumu uzpeldēšanu. Pārbaudiet uz tā dažādu notikumu tipu uzpeldēšanu.

Uzplūst ne visi notikumi. Eksperimentāli atrodiet vismaz vienu notikumu, kas neuzpeldēs.