Как подписаться на событие нажатия на кнопку?
DOM и браузер
На нажатие кнопки подписываются через `addEventListener('click', handler)` на элементе кнопки. В React — проп `onClick`.
addEventListener
const button = document.querySelector('#btn');
button.addEventListener('click', (event) => {
console.log('Кнопка нажата');
handleClick();
});- Несколько обработчиков, опции, снятие через
removeEventListener.
Свойство onclick
button.onclick = () => handleClick();- Один обработчик.
В React
<button onClick={handleClick}>Кнопка</button>
<button onClick={() => handleClick(id)}>С аргументом</button>Передают функцию (не вызов); для аргументов — стрелку.
Клавиатурная доступность
Нативный <button> реагирует и на Enter/Space автоматически. Если делаете кликабельным <div> — добавьте:
div.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') handleClick();
});(лучше использовать <button> — доступность из коробки).
Объект события
button.addEventListener('click', (e) => {
e.preventDefault(); // отменить действие (submit)
e.target; // кнопка
});Коротко для собеседования
На нажатие кнопки подписываются button.addEventListener('click', handler) (основной) или button.onclick = handler (один обработчик). В React — onClick={handler} (передают функцию, для аргументов — стрелку). Нативный <button> реагирует и на Enter/Space (доступность). Снятие — removeEventListener.