PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

Как подписаться на событие нажатия на кнопку?

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.

Другие вопросы раздела