Optimisation des gestionnaires d'événements en JavaScript

Un nombre excessif de gestionnaires, attachés aux éléments, consomme beaucoup de mémoire vive et entraîne des ralentissements de la page.

Regardons un exemple. Supposons que nous ayons une certaine liste :

<ul></ul>

Obtenons une référence à cette liste dans une variable :

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

Remplissons maintenant notre liste avec des balises li, en leur attachant un gestionnaire de clic :

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

Au final, nous nous retrouvons avec 1000 gestionnaires. C'est énorme. Pour optimiser, nous pouvons attacher un seul gestionnaire sur la balise ul, en utilisant la délégation d'événements.

Faisons cela. Pour commencer, créons simplement les éléments de la liste :

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

Et maintenant, mettons en place la délégation du gestionnaire d'événements :

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

Créez un tableau HTML de taille 100 sur 100. Faites en sorte que chaque cellule devienne rouge lors d'un clic.