Optimalizácia obsluhy udalostí v JavaScripte

Príliš veľa obsluhy udalostí, pripojených na prvky, zjede veľa operačnej pamäte a vedie k zamrznutiu stránky.

Pozrime sa na príklad. Predpokladajme, že máme nejaký zoznam:

<ul></ul>

Získame odkaz na tento zoznam do premennej:

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

Vyplníme teraz náš zoznam značkami li, pričom na ne pripojíme obsluhu kliknutia:

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

Výsledkom je, že máme 1000 obsluh udalostí. To je veľmi veľa. Pre optimalizáciu môžeme pripojiť iba jednu obsluhu udalostí na značku ul, využitím delegovania udalostí.

Urobme to. Na začiatok jednoducho vytvorme položky zoznamu:

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

A teraz vykonajme delegovanie obsluhy udalostí:

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

Vytvorte HTML tabuľku s veľkosťou 100 na 100. Zaistite, aby sa každá bunka po kliknutí zafarbila na červenú.