Eseménybuborékolás a JavaScriptben

Képzeljük el, hogy van néhány egymásba ágyazott blokkunk:

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

Vegyük fel a div-ekre mutató hivatkozásokat változókba:

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

Most rendeljünk hozzájuk kattintáskezelőket:

elem1.addEventListener('click', function() {
	alert('zöld');
});
elem2.addEventListener('click', function() {
	alert('kék');
});
elem3.addEventListener('click', function() {
	alert('piros');
});

Jelenítsük meg a blokkjainkat, hozzáadva néhány CSS-t:

Most kattintsunk a legbelső piros blokkra - és látni fogjuk, hogy az esemény először a piros blokkban aktiválódik, majd a kékben, majd a zöldben. És ez logikus, hiszen a belső blokkra kattintva egyidejűleg az összes külső blokkra is kattintunk.

Vagyis úgy tűnik, hogy amikor a legbelső blokkra kattintunk, a kattintás esemény először abban jelenik meg, majd aktiválódik a szülőjében, a szülő szülőjében, és így tovább, amíg el nem ér a legfelső szintig.

Ezt a viselkedést eseménybuborékolásnak (bubbling) nevezzük - a levegőbuborékok fenékről való felbuborékolásához hasonlóan. Ahogy a buborék, az eseményünk is mintha feljebb törne, minden alkalommal magasabb blokkokon aktiválódva.

Írjon önállóan kódot, amely bemutatja az eseménybuborékolást. Tesztelje rajta a különböző típusú események buborékolását.

Nem minden esemény képes buborékolni. Kísérletezve keressen legalább egy olyan eseményt, amely nem buborékol.