Hoe implementeer je gebeurtenisdelegatie voor een lijst met knoppen die een modaal venster openen?

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

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