Optimalizace obslužných rutin událostí v JavaScriptu

Příliš mnoho obslužných rutin, připojených k prvkům, spotřebovává hodně operační paměti a vede k zasekávání stránky.

Podívejme se na příklad. Předpokládejme, že máme nějaký seznam:

<ul></ul>

Získáme odkaz na tento seznam do proměnné:

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

Nyní naplníme náš seznam tagy li, a připojíme k nim obslužnou rutinu kliknutí:

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ýsledkem je, že máme 1000 obslužných rutin. To je velmi mnoho. Pro optimalizaci můžeme připojit pouze jednu obslužnou rutinu k tagu ul, pomocí delegování událostí.

Pojďme to udělat. Nejprve jednoduše vytvořme položky seznamu:

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

A nyní provedeme delegování obslužné rutiny událostí:

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

Vytvořte HTML tabulku o velikosti 100 na 100. Zařiďte, aby se každá buňka po kliknutí obarvila na červenou.