Optimizimi i Përpunuesve të Ngjarjeve në JavaScript

Numri i tepërt i përpunuesve, të lidhur në elementët konsumon shumë memorie operative dhe çon në ngërçje të faqes.

Le të shohim një shembull. Le të themi se kemi një listë:

<ul></ul>

Le të marrim një referencë për këtë listë në një ndryshore:

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

Le të plotësojmë listën tonë me taget li, duke lidhur një përpunues klikimi për to:

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);
	});
}

Si rezultat, ne kemi 1000 përpunues. Kjo është shumë. Për optimizim ne mund të lidhim vetëm një përpunues në tagun ul, duke përdorur delegimin.

Le ta bëjmë këtë. Së pari le të krijojmë pikat e listës:

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

Dhe tani le të kryejmë delegimin e përpunuesit të ngjarjeve:

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

Krijoni një tabelë HTML me madhësi 100 me 100. Bëni që çdo qelizë të ngjyroset me ngjyrë të kuqe kur klikohet.