Optymalizacja obsługi zdarzeń w JavaScript

Nadmierna liczba procedur obsługi zdarzeń, przypisanych do elementów, zużywa dużo pamięci operacyjnej i prowadzi do zawieszania się strony.

Spójrzmy na przykład. Załóżmy, że mamy pewną listę:

<ul></ul>

Pobierzmy referencję do tej listy do zmiennej:

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

Wypełnijmy teraz naszą listę znacznikami li, przypisując do nich procedurę obsługi kliknięcia:

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

W efekcie otrzymujemy, że mamy 1000 procedur obsługi. To bardzo dużo. Dla optymalizacji możemy przypisać tylko jedną procedurę obsługi do znacznika ul, wykorzystując delegowanie zdarzeń.

Zróbmy to. Na początek po prostu stwórzmy elementy listy:

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

A teraz wykonajmy delegowanie obsługi zdarzeń:

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

Stwórz tabelę HTML o rozmiarze 100 na 100. Spowoduj, aby każda komórka po kliknięciu zmieniała kolor na czerwony.