Händelsebubbling i JavaScript

Föreställ dig att du har flera kapslade block inuti varandra:

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

Låt oss hämta referenser till våra divs i variabler:

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

Och nu lägger vi till klick-hanterare på dem:

elem1.addEventListener('click', function() {
	alert('grön');
});
elem2.addEventListener('click', function() {
	alert('blå');
});
elem3.addEventListener('click', function() {
	alert('röd');
});

Låt oss visa våra block på skärmen genom att lägga till lite CSS:

Klicka nu på det innersta röda blocket - och du kommer att se hur händelsen först utlöses i det röda blocket, sedan i det blå, sedan i det gröna. Och det är logiskt, för när du klickar på det inre blocket klickar du samtidigt på alla yttre block.

Det betyder att när du klickar på det innersta blocket, uppstår klickhändelsen först i det, sedan utlöses den i dess förälder, i förälderns förälder och så vidare, tills den når hela vägen till toppen.

Detta beteende kallas händelsebubbling (bubbling) - i analogi med hur en luftbubbla stiger från botten. Precis som bubblan simulerar vår händelse uppåt, och utlöses varje gång på högre block.

Skriv självständigt kod som demonstrerar händelsebubbling. Testa bubbling av olika typer av händelser på den.

Inte alla händelser kan bubbla. Experimentellt hitta åtminstone en händelse som inte bubblar.