Optimering af event handlers i JavaScript

Et overdrevent antal event handlers, sat på elementer, forbruger en masse hukommelse og fører til at siden hænger.

Lad os se på et eksempel. Antag at vi har en liste:

<ul></ul>

Lad os få en reference til denne liste i en variabel:

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

Lad os nu fylde vores liste med li tags, og tilføje en click event handler 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);
	});
}

Resultatet er, at vi har 1000 event handlers. Det er meget. For at optimere kan vi tilføje kun een event handler på ul tagget, ved at bruge delegation.

Lad os gøre det. Til at starte med skal vi bare oprette listepunkterne:

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

Og nu udfører vi delegation af event handler:

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

Opret en HTML tabel med størrelsen 100 gange 100. Gør så hver celle farves rød ved klik.