Իվենթների բաբլում 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) իրադարձությունների - անալոգիայով օդի պղպջակի բաբլման հետ հատակից: Ինչպես և պղպջակը, մեր իրադարձությունը կարծես բարձրանում է վերև, ամեն անգամ գործարկվելով ավելի բարձր բլոկներում: