Vurugu ya Matukio katika JavaScript

Fikiria kuwa una vitalu kadhaa viliyowekwa ndani ya kila mmoja:

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

Tutaweka viungo kwa divi zetu katika vigezo:

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

Sasa tuwaweke wakaguzi wa kubofya:

elem1.addEventListener('click', function() {
	alert('kijani');
});
elem2.addEventListener('click', function() {
	alert('samawati');
});
elem3.addEventListener('click', function() {
	alert('nyekundu');
});

Tutaonyesha vitalu vyetu kwenye skrini, tukivaongezea CSS fulani:

Sasa bofya kwenye kizuizi cha ndani zaidi cha nyekundu - na utaona jinsi tukio kwanza linafanya kazi kwenye kizuizi cha nyekundu, kisha kwenye cha samawati, kisha kwenye kijani. Na hii inaeleweka, kwani kubofya kwenye kizuizi cha ndani, wewe kwa wakati mmoja unabofya kwenye vitalu vyote vya nje.

Hivyo inageuka kuwa wakati unabofya kwenye kizuizi cha ndani zaidi, tukio la kubofya hutokea kwanza ndani yake, kisha litafanya kazi kwenye mzazi wake, kwenye mzazi wa mzazi wake na kadhalika, hadi ifikapo hadi juu kabisa.

Tabia kama hii inaitwa vurugu (bubbling) ya matukio - kwa mlinganisho na kiputo cha hewa kinachovuma kutoka chini. Vilevile kama kiputo, tukio letu linaonekana kuvuma juu, kila wakati likifanya kazi kwenye vitalu vya juu zaidi.

Andika mwenyewe msimbo ambao utaonyesha vurugu ya matukio. Jaribu juu yake vurugu ya aina mbalimbali za matukio.

Si matukio yote yanaweza kuvuma. Kwa majaribio pata angalau tukio moja, ambalo halitakuvuma.