Что такое делегирование

Делегирование событий — это техника обработки событий, при которой обработчик вешается не на каждый элемент, а на их общего родителя. При событии оно всплывает до родителя, где и обрабатывается.

Преимущества:

• Работает с динамически добавляемыми элементами
• Меньше обработчиков → лучше производительность
• Проще управлять кодом

Пример:

document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('Клик по элементу списка:', e.target.textContent);
  }
});

Работает даже если новые li добавляются после загрузки страницы. Проверка e.target (или e.target.closest()) позволяет определить, на каком именно потомке произошло событие.