Optimalisatie van gebeurtenisafhandelaars in JavaScript

Een overmatig aantal afhandelaars, die aan elementen zijn gekoppeld, verbruiken veel werkgeheugen en leiden tot haperende pagina's.

Laten we een voorbeeld bekijken. Stel we hebben een bepaalde lijst:

<ul></ul>

Laten we een referentie naar deze lijst in een variabele krijgen:

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

Laten we nu onze lijst vullen met li tags, en er een klikafhandelaar aan koppelen:

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

Uiteindelijk hebben we 1000 afhandelaars. Dat is erg veel. Voor optimalisatie kunnen we slechts één afhandelaar koppelen aan de ul tag, door gebruik te maken van delegatie.

Laten we dit doen. Laten we eerst de lijstitems aanmaken:

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

En laten we nu de gebeurtenisafhandeling delegeren:

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

Maak een HTML-tabel met een grootte van 100 bij 100. Zorg ervoor dat elke cel bij een klik rood kleurt.