Что такое делегирование событий

Делегирование событий — это подход, когда обработчик события назначается родительскому элементу, а не каждому дочернему элементу отдельно. События всплывают (bubble) от целевого элемента вверх по DOM, что позволяет перехватывать их на родителе.

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

• Экономит память (один обработчик вместо множества)
• Работает с динамически добавляемыми элементами
• Упрощает код для групп однотипных элементов

Пример:

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

Важно: Проверяйте e.target или используйте e.target.closest(селектор) для точного определения целевого элемента.