Ugatuzi wa Matukio katika JavaScript

Katika somo lilopita tatizo liliweza kuelezwa, linalotokea wakati wa kuongeza vipengele vipya, na suluhisho lake lilitolewa. Katika somo hili tuta chunguza njia bora zaidi ya kuepuka tatizo - ugatuzi wa matukio. Hebu tulibainishe.

Kama unavyojua, kubonyeza li, sisi wakati huo huo tunabonyeza ul. Hii inawezekana kwa shukrani kwa matukio yanayofufuka. Tunaweza kutumia hii kutatua shida yetu: tutaweka tukio sio kwa kila li, bali kwa mzazi wao ul:

list.addEventListener('click', function() {
	
});

Sasa kwenye kishughulizi cha tukio this itaelekeza kwenye kipengele ambacho kimefungwa kishughulizi, na event.target - kwenye kipengele, ambapo tukio limetokea:

list.addEventListener('click', function(event) {
	console.log(this);         // orodha yetu
	console.log(event.target); // kipengee cha orodha
});

Tufanye ili li, ambayo ilibonyezwa, mwisho iongezwe alama ya mshangao:

list.addEventListener('click', function(event) {
	event.target.textContent = event.target.textContent + '!';
});

Rudia suluhisho lililotolewa. Hakikisha, kwamba li mpya pia itagusa kubonyeza.