Como implementar a delegação de eventos para uma lista com botões que abrem uma janela modal?

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

Пример на JavaScript:

const list = document.getElementById('button-list');

list.addEventListener('click', event => {
  const target = event.target;
  if (target.tagName === 'BUTTON') {
    // Открываем модальное окно, используя данные из кнопки
    const modalContent = target.dataset.modalContent;
    openModal(modalContent);
  }
});

function openModal(content) {
  const modal = document.getElementById('modal');
  modal.querySelector('.content').textContent = content;
  modal.style.display = 'block';
}

В этом примере один обработчик на контейнере button-list ловит клики по кнопкам внутри. Проверяется, что клик был именно по кнопке, и затем вызывается функция открытия модального окна с нужным содержимым.