Įvykių plitimas JavaScript

Įsivaizduokite, kad turite kelis vienas į kitą įdėtus blokus:

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

Gaukime nuorodas į savo div'us į kintamuosius:

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

O dabar uždėkime ant jų paspaudimo apdorotojus:

elem1.addEventListener('click', function() {
	alert('žalias');
});
elem2.addEventListener('click', function() {
	alert('mėlynas');
});
elem3.addEventListener('click', function() {
	alert('raudonas');
});

Atvaizduokime savo blokus ekrane, pridedant šiek tiek CSS:

Dabar paspauskite ant paties vidinio raudono bloko - ir pamatysite, kaip įvykis pirmiausia suveiks raudoname bloke, po to mėlyname, po to žaliame. Ir tai logiška, nes spaudžiant ant vidinio bloko, jūs vienu metu spaudžiate ant visų išorinių.

Tai pasirodo, kad kai jūs spaudžiate ant paties vidinio bloko, paspaudimo įvykis atsiranda pirmiausia jame, tada suveikia jo tėviniame elemente, tėvinio elemento tėvinyje ir taip toliau, kol pasiekia pačią viršūnę.

Tokio elgesio pavadinimas yra įvykių plitimas (bubbling) - pagal analogiją su oro burbuliuko išnyra nuo dugno. Taip pat, kaip ir burbuliukas, mūsų įvykis tarsi išplauja į viršų, kaskart suveikdamas aukštesniuose blokuose.

Savarankiškai parašykite kodą, kuris demonstruotų įvykių plitimą. Išbandykite ant jo įvairių tipų įvykių plitimą.

Plįsti gali ne visi įvykiai. Eksperimentiškai suraskite bent vieną įvykį, kuris neplis.