Tapahtumien kuplinta JavaScriptissä

Kuvittele, että sinulla on useita toisiinsa sisäkkäisiä lohkoja:

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

Haetaan viitteet div-elementteihimme muuttujiin:

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

Asetetaan nyt klikkaustapahtumien käsittelijät niille:

elem1.addEventListener('click', function() {
	alert('vihreä');
});
elem2.addEventListener('click', function() {
	alert('sininen');
});
elem3.addEventListener('click', function() {
	alert('punainen');
});

Näytetään lohkomme ruudulla lisäämällä niille CSS-tyylejä:

Klikkaa nyt sisimpää punaista lohkoa - ja näet, kuinka tapahtuma ensin laukeaa punaisessa lohkossa, sitten sinisessä, sitten vihreässä. Ja se on loogista, sillä klikkaamalla sisempää lohkoa, klikkaat samanaikaisesti kaikkia ulompia lohkoja.

Eli käy niin, että kun klikkaat sisintä lohkoa, klikkaus tapahtuma syntyy ensin siinä, sitten se laukeaa sen vanhemmassa, vanhemman vanhemmassa ja niin edelleen, kunnes se saavuttaa huipun.

Tätä käyttäytymistä kutsutaan tapahtumien kuplinnaksi (bubbling) - analogisesti ilmapuolan kuplimisella pohjalta. Kuten kupla, tapahtumamme ikään kuin nousee pinnalle, laueten joka kerta korkeammilla lohkoilla.

Kirjoita itsenäisesti koodi, joka demonstroi tapahtumien kuplintaa. Testaa sillä eri tyyppisten tapahtumien kuplintaa.

Eivät kaikki tapahtumat kupli. Etsi kokeellisesti vähintään yksi tapahtuma, joka ei kupli.