Uboreshaji wa Vichakataji Matukio katika JavaScript

Vichakataji vingi mno, vilivyowekwa kwenye vipengele vinatumia kumbukumbu ya RAM nyingi na husababisha ukurasa kukwama.

Wacha tuangalie kwa mfano. Hebu tuseme tuna orodha fulani:

<ul></ul>

Tutapata kiunga kwa orodha hii kwenye kutofautisha:

let ul = document.querySelector('ul');

Wacha sasa tujaze orodha yetu kwa vitambulisho li, tukiwakia kichakataji cha kubonyeza:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
	
	li.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

Hatimaye, tunakuwa na 1000 vichakataji. Hii ni nyingi sana. Kwa uboreshaji tunaweza kuweka kichakataji kimoja tu kwenye kitambulisho ul, kwa kutumia delegation.

Wacha tufanye hivyo. Kwanza tuunda vipengele vya orodha:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
}

Na sasa tutumie delegation ya kichakataji matukio:

ul.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		console.log(li.textContent);
	}
});

Unda jedwali la HTML la ukubwa 100 kwa 100. Fanya kila kiwango kubadilisha rangi kuwa nyekundu kwa kubonyeza.