Привет, я Александр Дудукало, фронтенд-разработчик. Сегодня я расскажу об обработчиках событий. Если коротко, вы узнаете о самом удобном способе управлять откликом на действия пользователя или браузера. 

Эта статья — часть базового курса, где я простым и доступным языком рассказываю о том, как научиться писать свои первые сайты и веб-приложения на JavaScript. Все детали под катом.

Статья написана максимально доступным языком, а для большего удобства есть отдельный видеоурок на эту тему — приглашаю посмотреть.

События и их обработчики

Итак, если вы уже умеете верстать сайты, то знаете, что в итоге кропотливой работы получаются статичные страницы. Красивые, но безжизненные. Как же их оживить? Как заставить кнопки отвечать на нажатия, формы проверять данные, а элементы реагировать на движения мыши? На помощь приходят события.

Событие в JavaScript — это сигнал от браузера о том, что что-то произошло. Клик мышкой, нажатие клавиши, отправка формы — все это события.

Самый простой способ отреагировать на событие, использовать свойство onclick:

const button = document.createElement("button");
button.textContent = "Кнопка";

button.onclick = function () {
 console.log("Кнопка нажата!");
};

document.body.append(button);

Но у этого способа есть существенный недостаток: мы можем назначить только одну функцию на одно событие. Если попробовать назначить еще одну, первая заменится. Это становится проблемой, когда над проектом работает несколько разработчиков или когда разные модули вашего кода должны реагировать на одно и то же событие.

Поэтому сейчас для работы с событиями используют метод addEventListener. Вот его главные преимущества:

• можно назначать несколько обработчиков на одно событие;

• более гибкие настройки;

• лучшая читаемость кода.

Для демонстрации я переписал предыдущий пример:

const button = document.createElement("button");
button.textContent = "Кнопка";

// button.onclick = function () {
//   console.log("Кнопка нажата!");
// };

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

document.body.append(button);

Разберем часть кода с добавлением обработчика:

• button — элемент, который должен реагировать на событие.

• addEventListener — метод для подписки на события.

• 'click' — тип события, на которое подписываемся (их много).

• function () { ... } — функция-обработчик, которая выполнится при клике.

Теперь добавим второй обработчик и посмотрим, как это работает:

const button = document.createElement("button");
button.textContent = "Кнопка";

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

button.addEventListener('click', function () {
 button.textContent = "Вы кликнули по кнопке";
});

document.body.append(button);

Оба обработчика будут работать, не мешая друг другу. Это особенно удобно в больших проектах, где разные модули могут работать с одними и теми же элементами.

Кстати, с помощью addEventListener можно не только добавлять обработчики событий, но и удалять их с помощью removeEventListener. Посмотрим, как это выглядит в коде:

const handleClick1 = function () {
   console.log("Кнопка нажата!");
};

const handleClick2 = function () {
   button.textContent = "Вы кликнули по кнопке";
};

const button = document.createElement("button");
button.textContent = "Кнопка";

button.addEventListener('click', handleClick1);
button.addEventListener('click', handleClick2);

// Для демонстрации удаляем первый обработчик
button.removeEventListener('click', handleClick1);

document.body.append(button);

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

Дальше будет больше примеров, но пока перейдем к другой важной теме.

Бесплатный базовый курс по JS

Рассказываем, как работать с переменными, типами данных, функциями и о многом другом!

Начать изучение →

Объект события и его свойства

Когда срабатывает событие, браузер не просто вызывает функцию-обработчик, но и передает подробную информацию о самом событии. Чтобы получить эту информацию, достаточно добавить в функцию параметр, в который будет передан специальный объект event. Именно он содержит все детали произошедшего события.

Давайте я покажу на примере: 

const button = document.createElement("button");
button.textContent = "Кнопка";

button.addEventListener("click", function (event) {
 console.log(event);
});

document.body.append(button);

В консоли вы увидите объект с десятками свойств — это лишь малая часть доступной информации. Там настолько много данных, что они не помещаются в консоль. Обязательно проверьте это сами ?

Конечно, мы не будем разбирать каждое свойство, но остановимся на самых полезных.

Target

event.target — элемент, на котором произошло событие (где был сделан клик).

Да, в некоторых задачах это свойство бывает полезным. Как на этом примере:

const handleClick = function (event) {
    console.log("Кликнули по:", event.target.textContent);
};

for (let i = 1; i <= 5; i++) {
    const button = document.createElement("button");
    button.textContent = Кнопка ${i};

    button.addEventListener("click", handleClick);

    document.body.append(button);
}

Мне не пришлось создавать для каждой кнопки отдельную функцию, я использовал одну, а с помощью target определяю, по какой именно кнопке кликнули. Это называется делегирование событий и очень удобно при работе с динамическими списками.

Получение данных о клавишах и мыши

event.key — символ нажатой клавиши (учитывает раскладку клавиатуры).

Часто нужно отслеживать нажатие клавиши Esc для закрытия модального окна или отмены действия:

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        console.log('Escape - закрываем модальное окно');
    }

    console.log('Нажата клавиша:', event.key);
});

event.clientX и event.clientY — координаты курсора относительно видимой области окна.

event.button — какая кнопка мыши была нажата (0 — левая, 1 — средняя, 2 — правая).

Эти свойства полезны при создании сложных интерфейсов или графических редакторов:

document.addEventListener('click', function(event) {
   console.log('Координаты:', event.clientX, event.clientY);
   console.log('Нажатая кнопка:', event.button);
});

preventDefault

preventDefault() — метод для отмены стандартного поведения браузера.

Многие события имеют встроенное поведение: отправка формы перезагружает страницу, клик по ссылке ведет на другую страницу. preventDefault отменяет это поведение:

const link = document.querySelector('a');

link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Переход по ссылке отменен');
});

Да, вы верно заметили, в event хранятся не только строки и числа, но и методы.

preventDefault часто используется для отмены отправки формы, которую браузер выполняет автоматически. Раньше формы отправляли данные по адресу из атрибута action, но современные приложения прерывают эту отправку для проверки данных и реализации собственной логики.

Объект event содержит множество полезных свойств и методов, которые раскрываются в контексте конкретного события. В следующей части статьи я познакомлю вас с самыми популярными типами событий.

Популярные типы событий в JavaScript

В мире браузерного JavaScript существует огромное количество событий. Они охватывают все возможные взаимодействия: от кликов мыши до загрузки страницы, от ввода текста до изменения размера окна. Сегодня мы рассмотрим 10 самых часто используемых событий, с которыми вы будете сталкиваться постоянно:

Эти события основа большинства интерактивных веб-приложений. Начните с них, и вы сможете создавать по-настоящему отзывчивые интерфейсы.

Итог

Сегодня мы рассмотрели одну из ключевых тем, которая превращает статичные страницы в интерактивные приложения. 

Давайте кратко повторим самое важное

• Современный стандарт работы с событиями — метод addEventListener.

• Объект события содержит всю информацию о произошедшем (координаты клика, нажатые клавиши, целевой элемент).

• event.target показывает, куда именно кликнул пользователь.

• preventDefault() позволяет отменить стандартное поведение браузера.

• Из объекта события можно получить данные о клавиатуре и мыши.

• И конечно, 10 самых популярных событий в таблице выше.

В своем видеоуроке я на реальных примерах показываю, как применять эти знания на практике: создаю интерактивные кнопки, обрабатываю ввод формы, работаю с клавиатурой и многое другое. Рекомендую посмотреть для лучшего закрепления материала.

Не переживайте, если тема кажется сложной. Начинайте с простых примеров, сделайте кнопку, которая меняет цвет страницы, или форму, которая проверяет ввод. Практика — это лучший способ разобраться.

В следующих статьях мы продолжим углубляться в возможности JavaScript и сделаем наши приложения еще более функциональными. До встречи!