Optimizacija obravnavalnikov dogodkov v JavaScriptu

Preveč obravnavalnikov, dodanih na elemente, porabi veliko operativnega spomina in povzroči zastajanje strani.

Poglejmo si na primeru. Recimo, da imamo nek seznam:

<ul></ul>

Pridobimo referenco na ta seznam v spremenljivko:

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

Izpolnimo zdaj naš seznam z oznakami li in jim dodajmo obravnavalnik klika:

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

Kot rezultat imamo 1000 obravnavalnikov. To je zelo veliko. Za optimizacijo lahko dodamo samo en obravnavalnik na oznako ul, z uporabo delegiranja.

Naredimo to. Za začetek preprosto ustvarimo elemente seznama:

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

In zdaj izvedemo delegiranje obravnavalnika dogodkov:

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

Ustvarite HTML tabelo velikosti 100 na 100. Naredite tako, da se vsaka celica ob kliku obarva rdeče.