Optimering van Gebeurtenishanteerders in JavaScript

Buitensporig baie hanteerders, wat op elemente geplaas is, vreet baie geheue en lei tot bladsy-hang.

Kom ons kyk na 'n voorbeeld. Gestel ons het 'n sekere lys:

<ul></ul>

Laat ons 'n verwysing na hierdie lys kry in 'n veranderlike:

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

Laat ons nou ons lys vul met li-etikette, deur op elk 'n kliekhanteerder te plaas:

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

Uiteindelik het ons 1000 hanteerders. Dit is baie. Vir optimalisering kan ons net een hanteerder plaas op die ul-etiket, deur gebruik te maak van delegasie.

Kom ons doen dit. Om mee te begin, skep ons eenvoudig die lysitems:

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

Laat ons nou gebeurtenishanteerder-delegasie implementeer:

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

Skep 'n HTML-tabel met grootte 100 met 100. Maak dit so dat elke sel rooi kleur wanneer daarop gekliek word.