First code
Назад

Браузерные события JavaScript

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

Что такое событийная модель в JavaScript?

Когда в браузере происходит какое-либо действие (например, клик), генерируется объект Event, который содержит всю информацию о произошедшем (какая кнопка мыши была нажата, координаты курсора и т.д.). Этот объект передается в функцию-обработчик (event listener), которую вы написали, чтобы отреагировать на это действие. Этот подход называется «обработкой событий» и позволяет вашему коду реагировать на действия пользователя в реальном времени.

События мыши

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

click

Самый частый обработчик. Срабатывает когда пользователь нажимает и отпускает основную кнопку мыши (обычно левую) на одном и том же элементе. Это комплексное событие, которое состоит из mousedown и mouseup. Идеально для кнопок, ссылок и любых кликабельных элементов.

Кликните на меня

block.addEventListener('click', () => {
    heading.innerText = 'Событие click сработало';
});

mousedown & mouseup

Эти события позволяют контролировать процесс нажатия более детально. mousedown срабатывает в момент, когда любая кнопка мыши была нажата над элементом, а mouseup — когда она была *отпущена`. Они незаменимы для реализации сложных взаимодействий, таких как перетаскивание (Drag&Drop) или кастомные слайдеры, где важно отслеживать начало и конец действия.

Кликните на меня

block.addEventListener('mousedown', () => {
    heading.innerText = 'Событие mousedown сработало';
});

block.addEventListener('mouseup', () => {
    heading.innerText = 'Событие mouseup сработало';
});

mousemove

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

Наведите на меня курсором мыши

let i = 0;
block.addEventListener('mousemove', () => {
    heading.innerText = 'Событие mousemove сработало - ' + i;
    i++;
});

mouseover & mouseout

Эти события сообщают о том, что курсор наехал на элемент (mouseover) или покинул его (mouseout). Важная особенность: они всплывают, и при переходе с родительского элемента на дочерний сначала сработает mouseout на родителе, а затем mouseover на дочернем. Часто используются для создания эффектов при наведении, которые сложно реализовать одним лишь CSS.

Наведите на меня курсором мыши

block.addEventListener('mouseover', () => {
    heading.innerText = 'Событие mouseover сработало';
});

block.addEventListener('mouseout', () => {
    heading.innerText = 'Событие mouseout сработало';
});

dblclick

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

Кликните на меня два раза

block.addEventListener('dblclick', () => {
    heading.innerText = 'Событие dblclick сработало';
});

contextmenu

Срабатывает при попытке открыть контекстное меню (обычно клик правой кнопкой мыши). Его часто используют чтобы полностью переопределить стандартное меню браузера и показать свое кастомное. Чтобы браузер не показывал свое меню, внутри обработчика нужно вызвать event.preventDefault().

Кликните на меня правой кнопкой мыши

block.addEventListener('contextmenu', (event) => {
    // отменяем вызов контекстного меню
    event.preventDefault();

    heading.innerText = 'Событие contextmenu сработало';
});

wheel

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

Прокрутите колесо мыши

let i = 0;
block.addEventListener('wheel', () => {
    heading.innerText = 'Событие wheel сработало - ' + i;
    i++;
});

События формы и полей

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

input

Событие input срабатывает, когда пользователь вводит в поле какие-либо данные. Срабатывает мгновенно при любом изменении значения в текстовом поле (<input>, <textarea>). Неважно, вводите вы текст, вставляете его или удаляете — событие будет генерироваться после каждого действия. Идеально для реализации живого поиска, подсчета символов или динамической валидации.

Введите значение в поле

input.addEventListener('input', () => {
    heading.innerText = input.value;
});

change

В отличие от input, событие change срабатывает не сразу, а когда элемент теряет фокус и его значение изменилось. Для выпадающих списков (<select>), чекбоксов (<input type="checkbox">) и радиокнопок (<input type="radio">) оно срабатывает сразу при изменении значения. Используется для финальной проверки данных перед отправкой.

Выберите значение

select.addEventListener('change', () => {
    heading.innerText = select.value;
});

focus & blur

События фокуса. focus срабатывает, когда пользователь активирует элемент (кликает на поле ввода, переходит по табу), а blur — когда элемент теряет фокус (пользователь кликнул в другое место или перешел табом). Полезны для подсветки активного поля, скрытия/показа подсказок или запуска валидации при уходе с поля

Сфокусируйтесь на поле

input.addEventListener('blur', () => {
    heading.innerText = 'События blur сработало';
});

input.addEventListener('focus', () => {
    heading.innerText = 'События focus сработало';
});

invalid

Это событие — ваш союзник в валидации форм. Оно срабатывает когда отправляемая форма содержит поле с невалидными данными (например, email не в том формате, или обязательное поле пустое, если указан атрибут required). Позволяет кастомизировать стандартные браузерные сообщения об ошибках.

Отправьте форму

input.addEventListener('invalid', () => {
    heading.innerText = 'Событие invalid сработало';
});

reset & submit

События формы. submit генерируется при попытке отправить форму (клик на кнопку или нажатие Enter). reset — при нажатии на кнопку сброса (<input type="reset">). Чаще всего используется для предварительной проверки (валидации) всех данных формы перед отправкой на сервер с помощью event.preventDefault().

Сфокусируйтесь на поле

form.addEventListener('submit', () => {
    heading.innerText = 'События submit сработало';
});

form.addEventListener('reset', () => {
    heading.innerText = 'События reset сработало';
});

События буфера обмена

copy & paste & cut

Эти события позволяют отслеживать и контролировать действия пользователя с буфером обмена. Они срабатывают при копировании, вставке и вырезании текста или контента соответственно. С помощью этих событий вы можете получить доступ к данным в буфере обмена (через event.clipboardData), модифицировать их или запретить действие по умолчанию. Например, можно очистить форматирование при вставке текста или запретить копирование определенного контента.

Скопируйте текст ниже и вставьте в поле


Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis ducimus quisquam officiis repudiandae sapiente voluptas, tenetur nihil sed quae explicabo? Dolor minus maiores quae ipsa reprehenderit, voluptate laboriosam asperiores odio!

text.addEventListener('copy', () => {
    heading.innerText = 'События copy сработало';
});

textarea.addEventListener('paste', () => {
    heading.innerText = 'События paste сработало';
});

События клавиатуры

Обработка нажатий клавиш для создания "горячих клавиш", игр или сложных форм.

keydown & keyup

Базовые события клавиатуры. keydown срабатывает в момент нажатия клавиши, а keyup — когда клавиша отпускается. Если пользователь удерживает клавишу, keydown будет срабатывать repeatedly. Эти события сообщают код физической клавиши (event.code) и символ, который она генерирует (event.key). Идеальны для действий, которые должны продолжаться, пока клавиша зажата (движение в играх).

Нажмите клавишу на клавиатуре

window.addEventListener('keydown', (event) => {
    console.log(event.key); // получем нажатую клавишу
    console.log(event.code); // получем нажатую клавишу
    heading.innerText = 'События keydown сработало';
});

window.addEventListener('keyup', (event) => {
    console.log(event.key); // получем отпущенную клавишу
    console.log(event.code); // получем отпущенную клавишу
    heading.innerText = 'События keyup сработало';
});

keypress

Важно: Это событие считается устаревшим и не рекомендуется к использованию в новых проектах. Ранее оно использовалось для обработки символьных клавиш (которые генерируют символ), а не служебных (Shift, Alt и т.д.). Современная практика — использовать keydown и keyup, проверяя свойство event.key.

let i = 0;
window.addEventListener('keydown', (event) => {
    heading.innerText = 'События keypress сработало - ' + i;
    i++;
});

События CSS Transition и Animation

Мощный инструмент для точной синхронизации JavaScript с визуальными эффектами.

transitionrun & transitionstart & transitionend

Позволяют отслеживать фазы CSS-перехода (transition). transitionrun срабатывает при применении стиля с переходом (до задержки). transitionstart — когда переход фактически начался (после задержки). transitionend — самое полезное событие, которое сообщает о завершении перехода. Используется для создания цепочек анимаций или выполнения кода строго после окончания плавного изменения.

block.addEventListener('transitionrun', () => {
    heading.innerText = 'Событие transitionRun сработало';
});

block.addEventListener('transitionstart', () => {
    heading.innerText = 'Событие transitionStart сработало';
});

block.addEventListener('transitionend', () => {
    heading.innerText = 'Событие transitionEnd сработало';
});

animationstart & animationend & animationiteration & animationcancel

Полный контроль над CSS-анимациями. animationstart — анимация началась. animationend — анимация завершена (включая все итерации). animationiteration — срабатывает в конце каждой итерации, кроме последней (идеально для бесконечных анимаций или подсчета циклов). animationcancel — анимация была прервана (например, она удалена из DOM). Эти события незаменимы для сложных сценариев, где логика приложения зависит от состояния анимации.

block.addEventListener('animationstart', () => {
    heading.innerText = 'Событие animationStart сработало';
});

block.addEventListener('animationend', () => {
    heading.innerText = 'Событие animationEnd сработало';
});

block.addEventListener('animationiteration', () => {
    heading.innerText = 'Событие animationIteration сработало';
});

block.addEventListener('animationCancel', () => {
    heading.innerText = 'Событие animationCancel сработало';
});

События загрузки страницы

load & DOMContentLoaded

Эти события отмечают ключевые этапы загрузки страницы. DOMContentLoaded срабатывает когда браузер полностью загрузил и распарсил HTML-документ, построив DOM-дерево. В этот момент ваши скрипты могут безопасно обращаться к любым DOM-элементам. При этом внешние ресурсы (картинки, стили) могут быть еще не загружены. Событие load срабатывает позже, когда вся страница, включая все зависимые ресурсы (стили, изображения, фреймы), полностью загружена. Для инициализации скриптов чаще и правильнее использовать DOMContentLoaded.

window.addEventListener('load', () => {
    heading.innerText = 'Событие load сработало';
});

window.addEventListener('DOMContentLoaded', () => {
    heading.innerText = 'Событие DOMContentLoaded сработало';
});

Заключение

Браузерные события — это нервная система интерактивного веба. Научившись грамотно их обрабатывать, вы сможете создавать по-настоящему отзывчивые и удобные для пользователя интерфейсы. Комбинируя разные типы событий (например, mousedown + mousemove + mouseup для перетаскивания), вы открываете безграничные возможности для frontend-разработки.