Оптимизация на обработчиците на събития в JavaScript

Прекалено много обработчици, поставени на елементи, изяждат много оперативна памет и водят до забавяне на страницата.

Нека да разгледаме пример. Да предположим, че имаме някакъв списък:

<ul></ul>

Нека получим референция към този списък в променлива:

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

Нека сега попълним нашия списък с тагове li, като поставим обработчик за клик върху тях:

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

В резултат се получава, че имаме 1000 обработчика. Това е твърде много. За оптимизация можем да поставим само един обработчик върху тага ul, като използваме делегиране.

Нека направим това. Първо просто създаваме точките от списъка:

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

А сега нека приложим делегиране на обработчика за събития:

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

Създайте HTML таблица с размер 100 на 100. Направете така, че всяка клетка при клик да се оцветява в червен цвят.