Event delegation

Делегирование вешает слушатель на устойчивого предка и обрабатывает события от подходящих потомков. Это работает, потому что многие события всплывают. Делегирование снижает churn слушателей в динамических списках, но надёжный код проверяет event.target, использует closest, валидирует вложенность и учитывает события без bubble.

					list.addEventListener('click', (event) => {
  const row = event.target.closest('[data-row]');
  if (!row || !list.contains(row)) return;
  activateRow(row);
});
				

`mouseenter`, `focus` и часть pointer-событий не всплывают — паттерн делегирования другой. `currentTarget` — элемент со слушателем; `target` — источник события.

На интервью: ждите вопросы про большие списки, динамические узлы, target vs currentTarget и особую обработку focus или mouseenter.

Типовые ошибки: слишком высокий предок скрывает владение; без проверки containment срабатывают чужие вложенные виджеты.

Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.

Чеклист:

• Стабильный предок с ясным владением.
• Фильтр через closest и contains.
• Знайте события без bubble.
• Не один глобальный обработчик на весь документ.