> Что такое паттерн делегирования событий в JavaScript (JavaScript)

Короткий ответ

Делегирование событий - это приём, при котором обработчик вешается не на каждый дочерний элемент, а на общего родителя. Событие от дочернего элемента всплывает до родителя, и там обрабатывается через проверку event.target. Это позволяет сократить количество обработчиков, экономить память и автоматически обрабатывать новые элементы, добавленные в DOM.

Подробное объяснение

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

Внутри обработчика вы определяете, какой именно элемент вызвал событие, через event.target. Затем проверяете, подходит ли этот элемент под нужный селектор (например, через closest()), и выполняете соответствующую логику.

Основные преимущества:

• меньше обработчиков - меньше памяти и быстрее инициализация;
• работает для динамически добавленных элементов без повторного назначения обработчиков;
• проще поддерживать - логика в одном месте.

Ограничения:

• не работает для событий, которые не всплывают (например, focus, blur, scroll);
• нужно аккуратно проверять event.target, чтобы не срабатывало на ненужных элементах;
• если вложенные элементы перехватывают событие через stopPropagation(), делегирование сломается.

На практике

Чаще всего делегирование применяется для:

• списков и меню - клики по пунктам;
• таблиц - клики по ячейкам или строкам;
• динамических списков задач, комментариев, сообщений;
• обработки ввода в формах с множеством полей (например, input на контейнере).

Важно помнить: при использовании делегирования не забывайте про event.target и event.currentTarget. currentTarget - это элемент, на котором висит обработчик (родитель), а target - элемент, на котором реально произошло событие.

Пример кода

JAVASCRIPT
// Вместо этого:
document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', () => {
    console.log('clicked', li.textContent);
  });
});

// Делегирование:
document.querySelector('ul').addEventListener('click', (event) => {
  const li = event.target.closest('li');
  if (li) {
    console.log('clicked', li.textContent);
  }
});

Пример с динамическими элементами:

JAVASCRIPT
const list = document.getElementById('todo-list');

list.addEventListener('click', (event) => {
  const button = event.target.closest('button.delete');
  if (button) {
    button.closest('li').remove();
  }
});

// Новые элементы добавляются без дополнительных обработчиков
function addTodo(text) {
  const li = document.createElement('li');
  li.innerHTML = `${text} <button class="delete">Удалить</button>`;
  list.appendChild(li);
}

Как отвечать на собеседовании

Начните с определения: делегирование - это перенос обработчика на родителя. Затем объясните механизм через всплытие событий и event.target. Приведите пример, где это полезно - динамические списки или большие таблицы. Упомяните ограничения: события без всплытия и stopPropagation. Если спросят про производительность - скажите, что один обработчик вместо сотни экономит память и время на инициализацию.

Что проверяет интервьюер

Интервьюер проверяет:

• понимание фазы всплытия и захвата событий;
• умение работать с event.target и event.currentTarget;
• знание метода closest() и его отличий от matches();
• осознание trade-off между простотой и потенциальными проблемами (например, случайные срабатывания);
• способность применить паттерн к реальной задаче.

Типичные ошибки

• Использование event.currentTarget вместо event.target - тогда обработчик всегда будет работать только на родителе.
• Отсутствие проверки closest() - обработчик срабатывает на любом клике внутри родителя, даже если клик был по пустому месту.
• Забывают, что делегирование не работает для focus, blur, scroll, mouseenter/mouseleave - эти события не всплывают.
• Переусложнение: делегирование ради делегирования, когда элементов мало и они статичны - проще повесить обработчики напрямую.