Bublání událostí v JavaScriptu

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

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

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

javascriptlet 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í:

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