Подигање на настани во JavaScript

Замислете дека имате неколку блокови вгнездени еден во друг:

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

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

Не можат да се подигнат сите настани. Експериментално пронајдете барем еден настан кој нема да се подигне.