Optimizarea handler-elor de evenimente în JavaScript

Un număr excesiv de mare de handler-e, atașate elementelor, consumă multă memorie operativă și duc la înghețarea paginii.

Să ne uităm la un exemplu. Să presupunem că avem o listă:

<ul></ul>

Să obținem o referință la această listă într-o variabilă:

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

Să populăm acum lista noastră cu tag-uri li, atașându-le un handler pentru click:

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

În final, rezultă că avem 1000 de handler-e. Este foarte mult. Pentru optimizare putem atașa un singur handler pe tag-ul ul, folosind delegarea.

Să facem acest lucru. Pentru început, pur și simplu să creem elementele listei:

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

Și acum să efectuăm delegarea handler-ului de evenimente:

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

Creați un tabel HTML de dimensiune 100 pe 100. Faceți ca fiecare celulă să se coloreze în roșu la click.