.addEventListener() в JavaScript

14 февраля 2026

Автор

Дмитрий Фандорин

.addEventListener() - это метод JavaScript, который позволяет добавлять обработчики событий к элементам на веб-странице. Он используется для того, чтобы приложение могло реагировать на действия пользователя, такие как клики на кнопки, наведение курсора мыши на элементы и др.

Использование .addEventListener() является краеугольным камнем при работе с событиями в JavaScript. Понимание того, как он работает, позволяет создавать интерактивные веб-страницы, реагирующие на действия пользователя. Для более глубокого понимания работы с DOM, различных способах добавления обработчиков событий и основ JavaScript, рекомендуется изучить наш курс JavaScript с нуля. На курсе 198 уроков и 30 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Описание работы

.addEventListener() работает путем привязки функции-обработчика к определенному событию, которое происходит с элементом на веб-странице. Когда событие происходит, функция-обработчик вызывается, что позволяет приложению выполнять определенные действия в ответ на это событие.

Пример использования .addEventListener() для отслеживания клика на кнопке:

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

button.addEventListener('click', function() {
  console.log('Кнопка нажата!');
});

В данном примере мы получаем ссылку на кнопку с помощью метода querySelector(), а затем добавляем обработчик события клика с помощью метода .addEventListener(). Функция-обработчик выводит сообщение в консоль при клике на кнопку.

.addEventListener() также может принимать дополнительные параметры, такие как useCapture и once. Параметр useCapture определяет, будет ли обработчик вызываться на этапе перехвата или на этапе всплытия события. Параметр once указывает, что обработчик должен быть вызван только один раз и затем удален.

Форма записи

.addEventListener() имеет следующий синтаксис:

element.addEventListener(event, function, useCapture);

где:

element - это элемент на веб-странице, для которого мы хотим добавить обработчик события.
event - это строка, представляющая тип события, на которое мы хотим реагировать (например, 'click', 'mouseover', 'keydown' и т.д.).
function - это функция-обработчик, которая будет вызываться при возникновении события.
useCapture - это опциональный параметр, который указывает, будет ли обработчик вызываться на этапе перехвата (true) или на этапе всплытия (false). По умолчанию значение useCapture равно false.

Заключение

.addEventListener() - это важный метод JavaScript, который позволяет приложению реагировать на действия пользователя на веб-странице. Он предоставляет мощный механизм для добавления обработчиков событий и определяет, как приложение будет реагировать на эти события.

Использование .addEventListener() — это базовый навык, но для создания сложных, отзывчивых веб-приложений, требуется более глубокое понимание продвинутых концепций. Для изучения модульности, асинхронности и объектно-ориентированного программирования, мы рекомендуем курс JavaScript Advanced. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир JavaScript прямо сегодня.