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

Digital-студия WNDER

Что такое событие и зачем оно нужно

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

Представьте, что сайт — это дом, а события — звонки в дверь. Вы (JavaScript) сидите внутри и ждете, когда кто-то позвонит. Как только звонок раздается, вы идете открывать. Точно так же браузер сообщает вашему коду: «Эй, пользователь кликнул!», и вы можете выполнить нужную функцию.

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

Как слушать события: метод addEventListener

Основной способ обработки событий — метод addEventListener. Он позволяет «подписаться» на событие и указать, что делать, когда оно произойдет. Синтаксис простой:

// Находим элемент, на котором будем слушать событие
const button = document.querySelector('#myButton');

// Добавляем обработчик события
button.addEventListener('click', function() {
  alert('Кнопка нажата!');
});

Здесь мы берем кнопку с id myButton и вешаем на нее обработчик клика. Когда пользователь кликнет, появится окно с сообщением. Проще некуда.

Можно также использовать анонимную стрелочную функцию, это короче:

button.addEventListener('click', () => {
  console.log('Клик!');
});

Разница в том, что стрелочная функция не имеет своего this, но об этом позже.

Какие бывают события: типы и примеры

Событий в JavaScript много, но их можно разделить на несколько категорий. Вот основные:

Категория Примеры событий Что они делают
Мышь click, dblclick, mouseover, mouseout Реагируют на действия мыши: клик, двойной клик, наведение
Клавиатура keydown, keyup, keypress Срабатывают при нажатии и отпускании клавиш
Формы submit, change, focus, blur Связаны с формами: отправка, изменение полей, фокус
Окно браузера scroll, resize, load Отслеживают прокрутку, изменение размера окна, загрузку
Документ DOMContentLoaded, visibilitychange Срабатывают при готовности документа или смене видимости вкладки

Это лишь малая часть. Но даже с этим списком можно сделать много интересного.

Как передать данные из события: объект event

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

Например, чтобы узнать, какая клавиша была нажата, можно сделать так:

document.addEventListener('keydown', function(event) {
  console.log('Вы нажали клавишу: ' + event.key);
});

Объект event доступен как аргумент в функции-обработчике. Его можно назвать как угодно, но обычно используют event или сокращенно e.

Этот объект также позволяет управлять поведением браузера по умолчанию. Например, если вы хотите, чтобы форма не отправлялась при нажатии Enter, можно вызвать метод preventDefault():

const form = document.querySelector('#myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // отменяем отправку
  console.log('Форма не отправилась!');
});

Правило: не забывайте удалять обработчики

Лайфхак: Если вы добавляете обработчик через addEventListener, но он больше не нужен, используйте removeEventListener. Это особенно важно в одностраничных приложениях, чтобы избежать утечек памяти и неожиданного поведения.

Удаление обработчика требует, чтобы функция была объявлена отдельно, а не анонимно. Например:

function handleClick() {
  console.log('Клик!');
}

button.addEventListener('click', handleClick);

// Позже удаляем
button.removeEventListener('click', handleClick);

Если вы добавили анонимную функцию, удалить её не получится — ссылка на неё не сохраняется.

Что в итоге

События — это сердце интерактивности на веб-страницах. Мы разобрали, что это такое, как их слушать с помощью addEventListener, какие бывают типы событий и как использовать объект event. Главное — не забывайте удалять обработчики, когда они больше не нужны, и используйте preventDefault, чтобы контролировать поведение браузера.

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

Студия WNDER