Come implementare la delega degli eventi per un elenco con pulsanti che aprono una finestra modale?

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

Пример на 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 ловит клики по кнопкам внутри. Проверяется, что клик был именно по кнопке, и затем вызывается функция открытия модального окна с нужным содержимым.