Обработчики событий в 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, удалить невозможно.

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

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

Когда срабатывает событие, браузер не просто вызывает функцию-обработчик, но и передает подробную информацию о самом событии. Чтобы получить эту информацию, достаточно добавить в функцию параметр, в который будет передан специальный объект 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 самых часто используемых событий, с которыми вы будете сталкиваться постоянно:

Название события	Когда срабатывает	Пример использования
click	При клике левой кнопкой мыши по элементу	Обработка нажатия кнопок, ссылок, любых интерактивных элементов
submit	При отправке формы	Перехват отправки формы для валидации данных или AJAX-запроса
input	При изменении значения поля ввода	Реализация живого поиска, подсчета символов, мгновенной валидации
change	Когда элемент меняет значение и теряет фокус	Обработка выбора в выпадающих списках, переключения чекбоксов и радиокнопок
keydown	При нажатии клавиши на клавиатуре	Обработка горячих клавиш, навигации в играх, блокировка определенных символов
keyup	При отпускании клавиши на клавиатуре	Отправка поискового запроса после окончания ввода, сброс состояния
load	Когда элемент или вся страница загрузилась	Инициализация сложных компонентов после полной загрузки страницы
DOMContentLoaded	Когда HTML документ полностью загружен и обработан	Быстрая инициализация скриптов после построения DOM-дерева
mouseover	Когда курсор мыши наводится на элемент	Показ подсказок, анимация при наведении, изменение внешнего вида
mouseout	Когда курсор мыши уходит с элемента	Сброс стилей после ухода курсора, скрытие всплывающих элементов

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

Итог

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

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

• Современный стандарт работы с событиями — метод addEventListener.
• Объект события содержит всю информацию о произошедшем (координаты клика, нажатые клавиши, целевой элемент).
• event.target показывает, куда именно кликнул пользователь.
• preventDefault() позволяет отменить стандартное поведение браузера.
• Из объекта события можно получить данные о клавиатуре и мыши.
• И конечно, 10 самых популярных событий в таблице выше.

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

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

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