PassFront
  1. PassFront
  2. База знаний
  3. Основы языка

Как запустить выполнение кода по нажатию на кнопку с помощью JS?

Основы языка

Код по нажатию кнопки запускают, навесив обработчик события `click` через `addEventListener` (предпочтительно) или через свойство/атрибут `onclick`.

addEventListener (предпочтительно)

const button = document.querySelector('#myButton');

button.addEventListener('click', () => {
  console.log('Кнопка нажата');
  doSomething();
});
  • Можно навесить несколько обработчиков.
  • Контроль фазы (capture), опции (once, passive).
  • Легко снять (removeEventListener).

Свойство onclick

button.onclick = () => {
  doSomething();
};
  • Только один обработчик (перезапишется при повторном присваивании).

Инлайн-атрибут (устаревший)

<button onclick="doSomething()">Кнопка</button>

Смешивает разметку и логику — не рекомендуется.

В React

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

Передают функцию, а не её вызов (onClick={fn}, не onClick={fn()}); для аргументов — стрелку.

Делегирование

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

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

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

Код по клику запускают через button.addEventListener('click', handler) (предпочтительно — несколько обработчиков, опции, снятие) или button.onclick = handler (один). Инлайн onclick устарел. В React — onClick={handler} (передают функцию, не вызов; для аргументов — стрелку). Для многих кнопок — делегирование через всплытие.

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