Обработчики событий в JavaScript

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

Эта статья — часть базового курса, где я простым и доступным языком рассказываю о том, как научиться писать свои первые сайты и веб-приложения на 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 и сделаем наши приложения еще более функциональными. До встречи!