Делегирование событий​

Делегирование событий — это один из базовых способов оптимизации работы с событиями. Суть заключается в том, что используя особенности событийной модели DOM, а именно, — всплытие, у нас появляется возможно зарегистрировать всего один обработчик вместо нескольких. Хороший пример — обычный туду лист.

Все прекрасно представляют что такое туду лист и как он выглядит. Представим, что каждый элемент списка должен реагировать на нажатие по себе — помечать задачу выполненной или, наоборот, помечать актуальной.

При использовании делегирования мы сможем использовать лишь один статичный слушатель:

<ul>
  <li>Купить молоко</li>
  <li>Сходить в спортзал</li>
  <li>Закончить отчет</li>
  <li>Починить кран</li>
  <li>Позвонить другу</li>
</ul>

И вот же пример кода с обработкой таких событий:

const todoList = document.querySelector('ul');

function handleTodoClick(event) {
  const target = event.target;
  if (target.tagName === 'li') {
    target.classList.toggle('done');
  }
}

todoList.addEventListener('click', handleTodoClick);

Этот код добавляет слушатель событий к родительскому элементу списка ul вместо каждого отдельного элемента списка li. Когда пользователь кликает на элемент списка, событие всплывает от li до ul. Без использования делегирования, нам пришлось бы вешать всё новые и новые обработчики событий для каждого элемента списка.

Конечно же, этот паттерн доступен не только в разработке на нативном JavaScript, но и поддержан во всех современных UI фреймворках. По крайней мере, среди тех, что знаю я.

Делегирование спасёт вас от большого веса приложения в оперативке, т.к. каждый слушатель занимает какое-то пространство в WebAPI, ускорит процесс отрисовки и позволит гораздо быстрее и проще вносить изменения в код вашего приложения.

Спасибо за прочтение, это важно для меня ❤️

#javascript #web #useful