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

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

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

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

Самастойна напішыце код, які будзе дэманстраваць усплыванне падзей. Праверце на ім усплыванне розных тыпаў падзей.

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