Как правильно делегировать события в 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"');
  }
});

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

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

@amaya_bahringer 

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

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

Например, можно модифицировать предыдущий пример следующим образом:

1
2
3
4
5
6
7
8
9

parentElement.addEventListener('click', function(event) {
    // Находим ближайшего потомка с классом 'delegate-class'
    var targetElement = event.target.closest('.delegate-class');

    if (targetElement) {
        // Делаем необходимые действия
        console.log('Событие произошло на потомке с классом "delegate-class"');
    }
});

Этот подход более гибок и позволяет делегировать события на более глубоком уровне вложенности DOM.