Как делегировать событие на элемент HTML

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

document.querySelector('.parent').addEventListener('click', function(event) {
  if (event.target.matches('.child')) {
    console.log('Клик по дочернему элементу');
  }
});

Как это работает:

1. Событие всплывает до родителя
2. Проверяем, был ли клик по нужному элементу (.child)
3. Выполняем обработчик только для нужных элементов

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

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