Догађаји догађаја у 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) - по аналогији са израњањем мехурића ваздуха са дна. Исто тако, као и мехурић, наш догађај као да израња на површину, сваки пут се активирајући на вишим блоковима.

Самостално напишите код који ће демонстрирати догађај догађаја. Проверите на њему догађај различитих типова догађаја.

Не могу сви догађаји да израњају. Експериментално пронађите бар један догађај који неће да израња.