Как в DOM подписаться на событие клика кнопки?

Как в DOM подписаться на событие клика кнопки?

• JavaScript и события DOM
• Для этого применяют метод addEventListener
• Синтаксис метода: element.addEventListener('click', handler)
• Функция-обработчик получает объект события (event)
• Один элемент может иметь несколько слушателей
• Метод работает в современных браузерах
• Он позволяет реагировать на действия пользователя

Подробный ответ

Основной ответ

Чтобы отследить клик по кнопке в DOM, в браузере обычно используют метод addEventListener. С его помощью к элементу привязывают функцию, которая выполняется при возникновении события click. Это современный, гибкий и поддерживаемый всеми актуальными браузерами способ обработки событий.

Пример простого кода:

const button = document.querySelector('button');
button.addEventListener('click', (event) => {
console.log('Кнопка нажата', event);
});

Ключевые моменты

• С помощью метода addEventListener можно назначить несколько обработчиков одного события: новые обработчики не заменяют уже добавленные. При прямом присваивании свойства onclick такого поведения нет.
• Внутри обработчика доступен объект события Event. Он содержит полезную информацию, включая target, координаты клика и сведения о нажатых клавишах.
• Фазу обработки события можно выбирать между capture и bubble, передавая третий аргумент в addEventListener. Обычно false означает обработку на этапе всплытия.
• Чтобы удалить подписку, применяют removeEventListener, передавая ту же функцию-обработчик.

Практический контекст

Такой способ часто используют в React 18+ вместе с refs, когда требуется напрямую обращаться к DOM-элементам, а также в vanilla JS для создания интерактивности без фреймворков. При подписке на большое количество элементов следует учитывать особенности делегирования событий и производительность: в подобных случаях обработчик размещают на родительском элементе, используя event delegation.