Իվենթների բաբլում JavaScript-ում

Պատկերացրեք, որ ունեք մի քանի մեկը մյուսի մեջ ներդրված բլոկներ.

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

Ստացենք մեր դիվերի հղումները փոփոխականների մեջ.

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

Եվ հիմա կցենք նրանց կլիկի իրադարձության մշակիչներ.

elem1.addEventListener('click', function() {
	alert('կանաչ');
});
elem2.addEventListener('click', function() {
	alert('երկնագույն');
});
elem3.addEventListener('click', function() {
	alert('կարմիր');
});

Եկեք ցուցադրենք մեր բլոկները էկրանին՝ ավելացնելով նրանց որոշ CSS.

Հիմա կտտացրեք ամենաներքին կարմիր բլոկին - և կտեսնեք, թե ինչպես իրադարձությունը նախ կգործարկվի կարմիր բլոկում, ապա երկնագույնում, այնուհետև կանաչում: Եվ դա տրամաբանական է, քանի որ կտտացնելով ներքին բլոկին, դու միաժամանակ կտտացնում ես բոլոր արտաքիններին:

Այսինքն ստացվում է, որ երբ դուք կտտացնում եք ամենաներքին բլոկին, կլիկի իրադարձությունը առաջանում է նախ դրանում, ապա գործարկվում է դրա ծնողում, ծնողի ծնողում և այսպես շարունակ, մինչև չհասնի մինչև վերև:

Նման վարքագիծը կոչվում է բաբլում (bubbling) իրադարձությունների - անալոգիայով օդի պղպջակի բաբլման հետ հատակից: Ինչպես և պղպջակը, մեր իրադարձությունը կարծես բարձրանում է վերև, ամեն անգամ գործարկվելով ավելի բարձր բլոկներում:

Ինքնուրույն գրեք կոդ, որը կցուցադրի իրադարձությունների բաբլումը: Ստուգեք դրա վրա տարբեր տիպի իրադարձությունների բաբլումը:

Չեն կարող բաբլել բոլոր իրադարձությունները: Փորձնականորեն գտեք գոնե մեկ իրադարձություն, որը չի բաբլում: