Optimering av händelsehanterare i JavaScript

Alltför många händelsehanterare, som är kopplade till element, förbrukar mycket arbetsminne och leder till att sidan hakar sig upp.

Låt oss titta på ett exempel. Antag att vi har en lista:

<ul></ul>

Låt oss hämta en referens till denna lista i en variabel:

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

Låt oss nu fylla vår lista med taggar li och koppla en klickhändelsehanterare till dem:

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

Som ett resultat får vi 1000 händelsehanterare. Det är väldigt många. För att optimera kan vi koppla endast en händelsehanterare till taggen ul genom att använda delegating.

Låt oss göra det. Låt oss först bara skapa listobjekt:

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

Och nu utför vi delegating av händelsehanteraren:

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

Skapa en HTML-tabell med storleken 100 gånger 100. Gör så att varje cell får en röd bakgrundsfärg när man klickar på den.