Оптимизация обработчиков событий в 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. Сделайте так, чтобы каждая ячейка по клику красилась в красный цвет.