> Как называется подход, когда обработчик клика вешается на контейнер, а событие обрабатывается на дочерних элементах (JavaScript)

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

Этот подход называется делегирование событий (event delegation). Он основан на всплытии событий в DOM: событие, возникшее на дочернем элементе, всплывает до контейнера, где его ловит один обработчик. Это позволяет не вешать слушатели на каждый дочерний элемент, экономя память и упрощая код, особенно при динамическом добавлении элементов.

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

Делегирование событий - это паттерн, при котором один обработчик на родительском элементе обрабатывает события от всех дочерних элементов. Механизм работает благодаря фазе всплытия (bubbling): когда пользователь кликает на дочерний элемент, событие последовательно проходит от целевого элемента вверх по DOM-дереву до document. Обработчик на контейнере получает это событие и может определить, какой именно дочерний элемент его вызвал, через event.target.

Ключевые преимущества:

• снижение потребления памяти (один обработчик вместо N);
• автоматическая обработка динамически добавляемых элементов;
• централизованная логика обработки.

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

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

На практике

Делегирование широко применяется в:

• списках и таблицах с повторяющимися строками;
• меню и выпадающих списках;
• drag-and-drop интерфейсах;
• обработке кликов на динамически создаваемых элементах (например, в чатах или лентах новостей).

Важно помнить про event.currentTarget - это сам контейнер с обработчиком, а event.target - элемент, на котором событие возникло. Для фильтрации часто используют closest() или matches().

Пример кода

JAVASCRIPT
// Вместо этого:
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleItemClick);
});

// Делегирование:
document.querySelector('.container').addEventListener('click', (event) => {
  const item = event.target.closest('.item');
  if (item) {
    handleItemClick(event, item);
  }
});

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

Начни с названия паттерна, кратко объясни механизм всплытия. Приведи пример, когда делегирование оправдано (список из 1000 элементов), и когда нет (события, не всплывающие). Упомяни про event.target vs event.currentTarget и про closest(). Если спросят про производительность - скажи, что делегирование обычно быстрее, но при очень глубоком DOM может быть overhead на проверки.

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

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

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

• путать делегирование с простым навешиванием обработчика на родителя без фильтрации event.target;
• забывать, что event.stopPropagation() в дочернем обработчике сломает делегирование;
• использовать делегирование для событий, которые не всплывают (например, mouseenter вместо mouseover);
• не учитывать, что при клике на вложенный элемент event.target может быть не тем, что ожидается (нужен closest).