Как отловить событие клика в JavaScript?

Событие клика ловят методом `addEventListener('click', handler)` на элементе (основной способ) или свойством `onclick`. В React — проп `onClick`.

addEventListener (основной)

const button = document.querySelector('#btn');
button.addEventListener('click', (event) => {
  console.log('Клик по', event.target);
});

• Несколько обработчиков, опции, снятие.

Свойство onclick

button.onclick = (event) => console.log('клик');

• Один обработчик.

Делегирование (для многих элементов)

Один обработчик на родителе через всплытие:

list.addEventListener('click', (e) => {
  if (e.target.matches('li')) {
    console.log('клик по', e.target.textContent);
  }
});

Ловит клики по всем потомкам, включая динамических.

В React

<button onClick={(e) => handleClick(e)}>Кнопка</button>
<button onClick={handleClick}>Кнопка</button>

Синтетическое событие; передают функцию (не вызов), для аргументов — стрелку.

Объект события

В обработчик приходит event:

button.addEventListener('click', (e) => {
  e.target;          // элемент-источник
  e.currentTarget;   // элемент с обработчиком
  e.preventDefault(); // отменить действие
  e.stopPropagation(); // остановить всплытие
  e.clientX, e.clientY; // координаты
});

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

Клик ловят element.addEventListener('click', handler) (основной — несколько обработчиков, опции) или element.onclick = handler (один). Для многих элементов — делегирование на родителе (через всплытие, event.target). В React — onClick={handler} (синтетическое событие). В обработчик приходит event (target, preventDefault, координаты).