JavaScript event delegation для динамических кнопок

Делегирование событий позволяет обрабатывать элементы, которые добавляются в DOM позже. Один обработчик на контейнере проверяет цель клика через closest и подходит для списков, таблиц и динамических карточек.

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

const list = document.querySelector('#list');
list.addEventListener('click', event => {
  const button = event.target.closest('button[data-action]');
  if (!button || !list.contains(button)) return;
  console.log(button.dataset.action, button.dataset.id);
});

Селектор ограничивает обработку кнопками с data-action. Проверка contains отсекает совпадения вне контейнера, если разметка сложная.

Частый вопрос

Почему обработчик не видит вложенный span?

closest ищет ближайшую подходящую кнопку от самого вложенного элемента. Если target иногда не Element, сначала нормализуйте его до родительского элемента.