Как в нативном JavaScript выполнить код при нажатии на кнопку?

Основы обработки клика

В нативном JavaScript для выполнения кода при нажатии на кнопку используется механизм событий. Событие 'click' возникает, когда пользователь нажимает и отпускает кнопку мыши над элементом. Чтобы отреагировать на это событие, необходимо зарегистрировать обработчик — функцию, которая будет вызвана при наступлении события.

Метод addEventListener

Самый современный и гибкий способ — использовать метод addEventListener на целевом элементе. Он позволяет добавлять несколько обработчиков на одно событие и легко управлять их удалением.

// Получаем ссылку на кнопку по её ID
const button = document.getElementById('myButton');

// Добавляем обработчик события 'click'
button.addEventListener('click', function() {
  console.log('Кнопка нажата!');
  alert('Привет, мир!');
});

Альтернативный способ: атрибут onclick

Существует также старый способ с использованием атрибута onclick в HTML или свойства onclick в JavaScript. Однако он менее гибкий (можно назначить только один обработчик) и считается устаревшей практикой.

// HTML: <button id="myButton" onclick="handleClick()">Нажми меня</button>

function handleClick() {
  console.log('Кнопка нажата через атрибут!');
}

Практический пример с изменением содержимого

Часто требуется не просто вывести сообщение, а изменить что-то на странице. Например, обновить текст в параграфе.

<button id="changeTextBtn">Изменить текст</button>
<p id="output">Исходный текст</p>

<script>
  const btn = document.getElementById('changeTextBtn');
  const output = document.getElementById('output');

  btn.addEventListener('click', () => {
    output.textContent = 'Текст изменён после клика!';
  });
</script>

Вывод

Используйте addEventListener для обработки кликов и других событий в нативном JavaScript. Это даёт чистый, поддерживаемый код и полный контроль над поведением элементов на странице.