Издигане на събития в 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) на събития - по аналогия с издигането на мехурче въздух от дъното. Така както мехурчето, нашето събитие сякаш изплува нагоре, като всеки път се задейства на по-високи блокове.

Самостоятелно напишете код, който ще демонстрира издигането на събития. Проверете върху него издигането на различни типове събития.

Не всички събития могат да се издигат. Експериментално намерете поне едно събитие, което не ще се издига.