Bubbling zdarzeń w JavaScript

Wyobraź sobie, że masz kilka zagnieżdżonych względem siebie bloków:

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

Pobierzmy referencje do naszych divów do zmiennych:

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

A teraz dodajmy do nich obsługę kliknięć:

elem1.addEventListener('click', function() {
	alert('zielony');
});
elem2.addEventListener('click', function() {
	alert('niebieski');
});
elem3.addEventListener('click', function() {
	alert('czerwony');
});

Wyświetlmy nasze bloki na ekranie, dodając im trochę CSS:

Kliknij teraz na najbardziej wewnętrzny czerwony blok - a zobaczysz, jak zdarzenie najpierw wykona się w czerwonym bloku, potem w niebieskim, a następnie w zielonym. I to jest logiczne, ponieważ klikając na blok wewnętrzny, jednocześnie klikasz na wszystkie zewnętrzne.

Czyli okazuje się, że kiedy klikasz na najbardziej wewnętrzny blok, zdarzenie kliknięcia pojawia się najpierw w nim, następnie jest wyzwalane w jego rodzicu, w rodzicu jego rodzica i tak dalej, aż dotrze do samej góry.

Takie zachowanie nazywa się bubbling (bubbling) zdarzeń - przez analogię do wypływania bańki powietrza z dna. Tak samo, jak bańka, nasze zdarzenie jakby wypływa na górę, za każdym razem wyzwalając się na wyższych blokach.

Samodzielnie napisz kod, który będzie demonstrował bubbling zdarzeń. Sprawdź na nim bubbling różnych typów zdarzeń.

Nie wszystkie zdarzenia mogą bubbleować. Eksperymentalnie znajdź przynajmniej jedno zdarzenie, które nie będzie bubbleować.