Как запустить выполнение кода по нажатию на кнопку с помощью 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} (передают функцию, не вызов; для аргументов — стрелку). Для многих кнопок — делегирование через всплытие.