Bublání událostí v JavaScriptu

Představte si, že máte několik vnořených bloků:

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

Získáme odkazy na naše divy do proměnných:

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

A nyní na ně přidáme obslužné rutiny kliknutí:

elem1.addEventListener('click', function() {
	alert('zelený');
});
elem2.addEventListener('click', function() {
	alert('modrý');
});
elem3.addEventListener('click', function() {
	alert('červený');
});

Zobrazíme naše bloky na obrazovce a přidáme jim nějaký CSS:

Nyní klikněte na nejvnitřnější červený blok - a uvidíte, jak událost nejprve zareaguje na červeném bloku, pak na modrém, poté na zeleném. A to je logické, protože kliknutím na vnitřní blok současně klikáte na všechny vnější.

To znamená, že když kliknete na nejvnitřnější blok, událost kliknutí vznikne nejprve v něm, poté se aktivuje v jeho rodiči, v rodiči jeho rodiče a tak dále, dokud nedosáhne úplného vrcholu.

Toto chování se nazývá bublání (bubbling) událostí - analogicky s bublinkou vzduchu stoupající ze dna. Stejně jako bublina, naše událost jakoby vyplouvá nahoru, pokaždé se aktivuje na vyšších blocích.

Samostatně napište kód, který bude demonstrovat bublání událostí. Ověřte na něm bublání různých typů událostí.

Nemohou bublat všechny události. Experimentálně najděte alespoň jednu událost, která nebude bublat.