Как повесить обработчик клика на кнопку в JavaScript через addEventListener?
Хочу, чтобы при нажатии на кнопку что-то происходило — например, всплывало сообщение. Знаю про onclick в HTML, но говорят, что лучше addEventListener. Как правильно повесить обработчик клика в JS?
2 ответа
addEventListener — основной способ подписаться на событие. Берёшь элемент и говоришь: на событие 'click' вызывай вот эту функцию.
const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => {
alert('Кнопку нажали!');
});
Если нужен сам объект события (координаты, какая клавиша и т.д.) — прими аргумент:
btn.addEventListener('click', (event) => {
console.log('Клик по:', event.target);
});
Чем лучше, чем onclick:
- Можно повесить несколько обработчиков на одно событие — они не перезатрут друг друга.
- Логика и разметка разделены (в HTML чисто).
- Легко снять обработчик через
removeEventListener.
Частая ошибка — вызвать функцию вместо передачи ссылки:
// неправильно: функция вызовется СРАЗУ, в слушатель уйдёт её результат
btn.addEventListener('click', handleClick());
// правильно: передаём саму функцию, без скобок
btn.addEventListener('click', handleClick);
function handleClick() {
console.log('клик');
}
Ещё ловушка: если btn оказался null (скрипт раньше HTML или опечатка в id), то addEventListener упадёт с Cannot read properties of null. Подключай скрипт в конце body или оборачивай в DOMContentLoaded.
Если кнопок много (например, список), не вешай слушатель на каждую — используй делегирование: один слушатель на родителя.
document.getElementById('list').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('нажата кнопка:', e.target.textContent);
}
});
Событие всплывает от кнопки к родителю, и ты ловишь его в одном месте. Удобно ещё и потому, что работает для кнопок, добавленных позже динамически.