Optimalisering av hendelseshåndterere i JavaScript

Et overdrevent antall hendelseshåndterere, festet til elementer, forbruker mye arbeidsminne og fører til at siden henger seg opp.

La oss se på et eksempel. Anta at vi har en liste:

<ul></ul>

La oss hente en referanse til denne listen i en variabel:

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

La oss nå fylle listen vår med li-tagger, og feste en klikk-håndterer til 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);
	});
}

Til slutt har vi 1000 hendelseshåndterere. Dette er veldig mange. For å optimalisere kan vi feste bare én hendelseshåndterer på ul-taggen, ved å bruke delegering.

La oss gjøre det. Først skal vi bare opprette listepunktene:

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

Og nå utfører vi delegering av hendelseshåndtereren:

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

Opprett en HTML-tabell med størrelsen 100 med 100. Gjør slik at hver celle får rød farge når den klikkes på.