Догађаји догађаја у JavaScript-у

Замислите да имате неколико блокова унутар једних других:

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

Добијмо референце на наше див-ове у променљиве:

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

А сада поставимо руковаоце кликова на њих:

javascriptelem1.addEventListener('click', function() {
  alert('зелени');
});
elem2.addEventListener('click', function() {
  alert('плави');
});
elem3.addEventListener('click', function() {
  alert('црвени');
});

Прикажимо наше блокове на екрану, додајући им нешто CSS-а:

Кликните сада на најдубљи црвени блок - и видећете како ће се догађај прво активирати у црвеном блоку, затим у плавом, па у зеленом. И то је логично, јер кликом на унутрашњи блок, истовремено кликате на све спољне.

То јест, испоставља се да када кликнете на најдубљи блок, догађај клика настаје прво у њему, затим се активира у његовом родитељу, у родитељу његовог родитеља и тако даље, док не стигне до самог врха.

Такво понашање се назива догађајем догађаја (bubbling) - по аналогији са израњањем мехурића ваздуха са дна. Исто тако, као и мехурић, наш догађај као да израња на површину, сваки пут се активирајући на вишим блоковима.