Otimização de manipuladores de eventos em JavaScript

Um número excessivo de manipuladores, associados aos elementos, consome muita memória RAM e leva a travamentos da página.

Vamos ver um exemplo. Suponha que temos uma determinada lista:

<ul></ul>

Vamos obter a referência para esta lista em uma variável:

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

Agora, vamos preencher nossa lista com tags li, associando a elas um manipulador de clique:

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

No final, temos 1000 manipuladores. Isso é muito. Para otimizar, podemos associar apenas um manipulador à tag ul, utilizando delegação de eventos.

Vamos fazer isso. Primeiro, vamos apenas criar os itens da lista:

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

E agora vamos realizar a delegação do manipulador de eventos:

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

Crie uma tabela HTML de tamanho 100 por 100. Faça com que cada célula fique vermelha ao ser clicada.