Усплыванне падзей у 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:

Націсніце цяпер на самы ўнутраны чырвоны блок - і вы ўбачыце, як падзя спачатку спрацуе ў чырвоным блоку, потым у блакітным, потым у зялёным. І гэта лагічна, бо клікаючы на ўнутраны блок, вы адначасова клікаеце на ўсе вонкавыя.

To ёсць атрымліваецца, што калі вы клікаеце на самы ўнутраны блок, падзя кліку ўзнікае спачатку ў ім, затым спрацьоўвае ў яго бацьку, у бацьку яго бацькі і так далей, пакуль не дайдзе да самага верху.

Такая паводзіны завецца усплываннем (bubbling) падзей - па аналогіі са ўсплываннем бурбалкі паветра з дна. Так жа, як і бурбалка, наша падзя быццам усплывае уверх, кожны раз спрацьоўваючы на больш высокіх блоках.