Eseménykezelők optimalizálása JavaScriptben

A túl sok eseménykezelő, amelyek az elemekre vannak telepítve, sok memóriát fogyaszt és az oldal lefagyásához vezethet.

Nézzük egy példán. Tegyük fel, hogy van egy listánk:

<ul></ul>

Kapjunk hivatkozást erre a listára egy változóba:

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

Töltsük most ki a listánkat li tag-ekkel, és telepítsünk rájuk egy kattintás eseménykezelőt:

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

Ennek eredményeképpen 1000 eseménykezelőnk lesz. Ez nagyon sok. Az optimalizálás érdekében csak egy eseménykezelőt telepíthetünk a ul tag-re, kihasználva az delegálás lehetőségét.

Tegyük ezt meg. Először egyszerűen hozzuk létre a lista elemeket:

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

És most végezzük el az esemény delegálását:

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

Hozz létre egy HTML táblázatot, melynek mérete 100 rá 100. Állítsd be, hogy minden cella kattintásra pirosra színeződjön.