Делегация мероприятия

Вы можете задаться вопросом: «Что такое делегирование событий?» Короче говоря, делегирование событий — это способ уменьшить количество прослушивателей событий, которые мы используем в нашем коде. Это бесценно для поддержания производительности и ограничения избыточности в нашей логике. Давайте посмотрим на пример.

Часто при разработке кода, который содержит некоторый тип «карточки» или несколько дочерних элементов, у нас будет какое-то событие щелчка, которое происходит с каждой из этих «карточек». Например:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
const cards = document.querySelectorAll('.child');

cards.forEach((card) => card.addEventListener('click', cb);

Это приведет к созданию нескольких прослушивателей событий (по одному для каждого дочернего элемента) и не будет эффективно масштабироваться. Используя делегирование событий, мы можем избежать этого, добавив один прослушиватель событий к родительскому элементу и проверив, что мы нажимаем.

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
const cardContainer = document.querySelector('.parent');

cardContainer.addEventListener('click', (e) => {
  const clicked = e.target;
  const childClasses = Array.from(clicked.classList); // Making the classlist an array
  if (childClasses.includes('child')) { // if what is clicked has class child then execute function
   someFunc();
  }
});

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

Это было короткое, но важное объяснение того, что такое делегирование событий!

Имейте это в виду в следующий раз, когда мы будем кодировать!