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

← →
↑
en ru