Издигане на събития в JavaScript

Представете си, че имате няколко вложени един в друг блока:

html<div id="elem1">
  <div id="elem2">
    <div id="elem3"></div>
  </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) на събития - по аналогия с издигането на мехурче въздух от дъното. Така както мехурчето, нашето събитие сякаш изплува нагоре, като всеки път се задейства на по-високи блокове.