Как правильно делегировать события в javascript?

@amaya_bahringer 

В JavaScript существует несколько способов делегирования событий. Один из наиболее распространенных подходов - использование метода addEventListener() в сочетании с применением всплытия событий.

Вот пример кода, демонстрирующего делегирование событий с использованием всплытия:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// Получаем родительский элемент, к которому мы хотим привязать делегирование событий
var parentElement = document.querySelector('#parent-element');

// Добавляем обработчик события на родительский элемент
parentElement.addEventListener('click', function(event) {
  // Проверяем, на каком элементе произошло событие
  var targetElement = event.target;
  
  // Проверяем, соответствует ли элемент определенному селектору
  if (targetElement.matches('.delegate-class')) {
    // Делаем необходимые действия
    console.log('Событие произошло на элементе с классом "delegate-class"');
  }
});

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

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