Optimización de manejadores de eventos en JavaScript

Una cantidad excesiva de manejadores, asignados a los elementos, consume mucha memoria RAM y provoca que la página se relentice.

Veamos un ejemplo. Supongamos que tenemos una lista:

<ul></ul>

Obtengamos una referencia a esta lista en una variable:

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

Llenemos ahora nuestra lista con etiquetas li, asignándoles un manejador 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);
	});
}

Como resultado, tenemos 1000 manejadores. Esto es demasiado. Para optimizar podemos asignar solo un manejador a la etiqueta ul, utilizando delegación de eventos.

Hagámoslo. Primero, simplemente creemos los elementos de la lista:

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

Y ahora implementemos la delegación del manejador de eventos:

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

Crea una tabla HTML de tamaño 100 por 100. Haz que cada celda se coloree de rojo al hacer clic.