Bubbling zdarzeń w JavaScript

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

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

Pobierzmy referencje do naszych divów do zmiennych:

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

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

javascriptelem1.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.