Справочник JavaScript

Делегирование событий в JavaScript

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

Рабочий пример

list.addEventListener("click", (event) => {
  const button = event.target.closest("button[data-id]");
  if (!button || !list.contains(button)) return;
  removeItem(button.dataset.id);
});

closest учитывает клик по иконке внутри кнопки, а contains защищает от совпадения за пределами нужного контейнера. Новые элементы автоматически обслуживаются тем же обработчиком.

Когда применять

Делегирование полезно для таблиц, меню и динамических списков. Не стоит вешать все события приложения на document: выбирай ближайший стабильный контейнер.

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

Частые ошибки

• Сравнивать target только с кнопкой
• Не ограничивать найденный элемент контейнером
• Останавливать всплытие без необходимости