Ottimizzazione dei gestori di eventi in JavaScript

Un numero eccessivo di gestori di eventi, assegnati agli elementi, consuma molta memoria RAM e porta a rallentamenti della pagina.

Diamo un'occhiata a un esempio. Supponiamo di avere un certo elenco:

<ul></ul>

Otteniamo un riferimento a questo elenco in una variabile:

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

Ora riempiamo il nostro elenco con tag li, assegnando loro un gestore per il 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);
	});
}

Il risultato è che abbiamo 1000 gestori di eventi. È un numero molto elevato. Per ottimizzare possiamo assegnare un solo gestore al tag ul, utilizzando la delega degli eventi.

Facciamolo. Per iniziare, semplicemente creiamo le voci dell'elenco:

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

E ora applichiamo la delega del gestore di eventi:

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

Crea una tabella HTML di dimensione 100 per 100. Fai in modo che ogni cella, al click, diventi rossa.