Сравни способы отслеживания события и объясни, когда выбирать каждый вариант.

Способы отслеживания события: `addEventListener` (гибкий, основной), свойство `on`, делегирование (один обработчик на родителе), в React — синтетические события. Выбор — по числу элементов и гибкости.**

Способы

addEventListener (основной)

element.addEventListener('click', handler, options);

• Несколько обработчиков, опции (capture, once, passive), снятие.
• Когда: универсальный выбор.

Свойство on*

element.onclick = handler;

• Один обработчик.
• Когда: простые случаи (редко).

Делегирование событий

Один обработчик на родителе для всех потомков (через всплытие):

list.addEventListener('click', (e) => {
  if (e.target.matches('li')) { /* обработка */ }
});

• Когда: много однотипных элементов, динамические элементы (экономия обработчиков).

React (синтетические события)

<button onClick={handler} />

• Кроссбраузерная обёртка, делегирование на корень автоматически.
• Когда: React-компоненты.

Опции addEventListener

• once: true — сработать один раз.
• passive: true — не блокировать scroll (для scroll/touch).
• capture: true — фаза погружения.

Как выбирать

• Один/несколько элементов → addEventListener.
• Много однотипных/динамических → делегирование.
• React → синтетические события.
• Одноразовое → once: true.

Коротко для собеседования

Отслеживание событий: addEventListener (основной — несколько обработчиков, опции capture/once/passive, снятие), свойство on* (один обработчик), делегирование (один обработчик на родителе через всплытие — много/динамические элементы), React синтетические события (onClick). Выбор: универсально → addEventListener, много элементов → делегирование.