Gebeurtenisborreling in JavaScript

Stel jou voor dat jy verskeie blokke het wat binne mekaar genestel is:

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

Laat ons verwysings na ons div's in veranderlikes kry:

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

En laat ons nou klikhanterders daarop plaas:

elem1.addEventListener('click', function() {
	alert('groen');
});
elem2.addEventListener('click', function() {
	alert('blou');
});
elem3.addEventListener('click', function() {
	alert('rooi');
});

Laat ons ons blokke op die skerm vertoon deur 'n bietjie CSS by te voeg:

Klik nou op die diepste rooi blok - en jy sal sien hoe die gebeurtenis eers in die rooi blok werk, dan in die blou, en dan in die groen. En dit is logies, want as jy op die innerlike blok klik, klik jy terselfdertyd op al die buitenste blokke.

Dit beteken dat wanneer jy klik op die diepste blok, die klikgebeurtenis eers daarin ontstaan, dan werk dit in sy ouer, in die ouer van sy ouer, en so aan, totdat dit die heel boonste bereik.

Sodanige gedrag word borreling (bubbling) van gebeure genoem - na analogie van 'n borrelende lugborrel wat vanaf die bodem opstyg. Soos die borrel, blyk ons gebeurtenis na bo te borrel, en werk elke keer op hoër blokke.

Skryf selfstandig kode wat gebeurtenisborreling demonstreer. Toets verskillende tipes gebeure daarmee.

Nie alle gebeure kan borrel nie. Vind eksperimenteel ten minste een gebeurtenis wat nie sal borrel nie.