Eseménybuborékolás a JavaScriptben

Képzeljük el, hogy van néhány egymásba ágyazott blokkunk:

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

Vegyük fel a div-ekre mutató hivatkozásokat változókba:

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

Most rendeljünk hozzájuk kattintáskezelőket:

javascriptelem1.addEventListener('click', function() {
  alert('zöld');
});
elem2.addEventListener('click', function() {
  alert('kék');
});
elem3.addEventListener('click', function() {
  alert('piros');
});

Jelenítsük meg a blokkjainkat, hozzáadva néhány CSS-t:

Most kattintsunk a legbelső piros blokkra - és látni fogjuk, hogy az esemény először a piros blokkban aktiválódik, majd a kékben, majd a zöldben. És ez logikus, hiszen a belső blokkra kattintva egyidejűleg az összes külső blokkra is kattintunk.

Vagyis úgy tűnik, hogy amikor a legbelső blokkra kattintunk, a kattintás esemény először abban jelenik meg, majd aktiválódik a szülőjében, a szülő szülőjében, és így tovább, amíg el nem ér a legfelső szintig.

Ezt a viselkedést eseménybuborékolásnak (bubbling) nevezzük - a levegőbuborékok fenékről való felbuborékolásához hasonlóan. Ahogy a buborék, az eseményünk is mintha feljebb törne, minden alkalommal magasabb blokkokon aktiválódva.