- Категории событий
- События мыши
- События при CSS переходе
- События при CSS анимации
- События клавиатуры
- События объектов и фреймов
- События формы и элементов управления
- События перетаскивания
- События буфера обмена
- События печати
- События, посылаемые сервером
- События мультимедиа
- Разные события
- Задания
- Комментарии
Браузерные события и примеры их использования в JavaScript

На этом уроке мы рассмотрим основные виды событий, которые Вы можете перехватывать с помощью JavaScript для выполнения некоторого кода.
Категории событий
Все события JavaScript можно разделить на следующие категории: события мыши (Mouse Events), события клавиатуры (Keyboard Events), события объектов и фреймов (Frame/Object Events), события формы и элементов управления (Form Events), события перетаскивания (Drag Events), события анимации (Animation Events), события буфера обмена (Clipboard Events), события мультимедиа (Media Events), события трансформации (Transition Events), события, посылаемые сервером (Server-Sent Events), события касания (Touch Events), события печати (Print Events), разные события (Misc Events).
События мыши
mousedown
– при нажатии кнопки мыши;mouseup
– при отпускании кнопки мыши;click
– при клике (порядок возникновения событий приclick
:mousedown
->mouseup
->click
);dblclick
– при двойном клике (порядок возникновения событий приdblclick
:mousedown
->mouseup
->click
->mousedown
->mouseup
->click
->dblclick
);mousemove
– при перемещении курсора мыши;mouseover
– при вхождении курсора мыши в область, принадлежащей целевому элементу и других элементов, вложенных в него;mouseenter
– при вхождении указателя мыши в целевой элемент (в отличие отmouseover
происходит только один раз при вхождении курсора в целевой элемент; при дальнейшем движении курсора и его вхождении в другие элементы (находящихся в целевом) – оно больше не возникает);mouseout
– при уходе курсора с целевого элемента и других элементов, вложенных в него;mouseleave
– при покидании границ целевого элемента (в отличие отmouseout
не возникает при покидании курсора элементов вложенных в целевой);contextmenu
– при открытии контекстного меню.
События при CSS переходе
transitionrun
– возникает при создании CSS перехода (т.е. когда он добавляется к набору запущенных переходов, но не обязательно он начался);transitionstart
– происходит, когда CSS переход начинает выполняться;transitioncancel
– возникает, если CSS переход был отменен;transitionend
– происходит при завершении CSS перехода.
Пример:
<style> #box { position: absolute; top: 15px; left: 15px; width: 100px; height: 100px; background-color: #03a9f4; } .transform { transform: translateX(300px); transition: transform 1s ease-in-out; } </style> <script> document.addEventListener('DOMContentLoaded', () => { document.addEventListener('click', (e) => { const $target = e.target; if ($target.matches('#start')) { e.preventDefault(); $box.classList.add('transform'); } else if ($target.matches('#cancel')) { e.preventDefault(); $box.classList.remove('transform'); } }); const $box = document.querySelector('#box'); $box.addEventListener('transitionrun', () => { console.log('transitionrun'); }); $box.addEventListener('transitionstart', () => { console.log('transitionstart'); }); $box.addEventListener('transitioncancel', () => { console.log('transitioncancel'); }); $box.addEventListener('transitionend', () => { console.log('transitionend'); }); }); </script> <div id="box"></div> <a href="#" id="start">Start</a> <a href="#" id="cancel">Cancel</a>
События при CSS анимации
animationstart
– происходит, когда CSS анимация начинается;animationiteration
– возникает, когда заканчивается одна итерация CSS анимации и начинается другая;animationend
– происходит при окончании CSS анимации.
События клавиатуры
Порядок возникновения событий: keydown
-> keypress
-> keyup
.
- keydown - событие происходит, когда нажата клавиша на клавиатуре над элементом, но ещё не отпущена.
- keyup - событие происходит, когда нажатая клавиша на клавиатуре над элементом перешла в состояние отпущено.
- keypress - событие происходит, когда пользователь нажал клавишу на клавиатуре над элементом.
События объектов и фреймов
- beforeunload - событие происходит, перед тем как документ будет выгружен. Это событие позволяет отображать дополнительное сообщение в диалоговом окне подтверждения "Вы действительно хотите покинуть эту страницу?". Стандартное сообщение, которое появляется при закрытии документа, может отличаться в разных браузерах. Но его Вы не можете изменить или удалить, Вы можете только с помощью этого метода добавить к нему собственное сообщение, которое будет отображаться вместе с сообщением по умолчанию.
- error - событие срабатывает при возникновении ошибки, которая происходит при загрузке внешнего файла (например, документа или изображения).
- hashchange - событие происходит при изменении якорной части (начинается с символа '#') текущего URL.
- load - событие происходит, когда загрузка объекта завершена. Событие
load
наиболее часто используется для элементаbody
, чтобы выполнить сценарий сразу же после того как веб-страница полностью загрузится. - unload - событие происходит при выгрузке страницы (например, при закрытии вкладки (окна) браузера).
- pageshow - событие происходит, когда пользователь переходит на веб-страницу, т.е. после того как страница становится доступна пользователю. Событие
pageshow
похоже на событиеload
, за исключением того, что оно срабатывает каждый раз при загрузке страницы, даже если она загружается из кэша. При первой загрузке страницы событиеpageshow
срабатывает сразу после событияload
. - pagehide - событие происходит, когда пользователь уходит со страницы (событие
pagehide
происходит до событияunload
). Кроме этого данное событие, в отличие от событияunload
не препятствует кэшированию страницы. - resize - событие происходит при изменении размеров окна браузера.
- scroll - событие происходит, когда вы прокручиваете содержимое элемента, имеющего полосу прокрутки.
События формы и элементов управления
- focus - событие происходит, когда элемент получает фокус. Данное событие не всплывает.
- blur - событие происходит, когда объект теряет фокус. Данное событие не всплывает.
- focusin - событие происходит, когда элемент получает фокус. Событие
focusin
подобно событиюfocus
, но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок? - focusout - событие происходит, когда элемент собирается потерять фокус. Событие
focusout
подобно событиюblur
, но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок? - change - событие происходит при изменении значения элемента, но уже после того как элемент потерял фокус. Кроме события
change
в JavaScript есть также похожее событиеinput
, которое отличается от событияchange
тем, что происходит сразу же после изменения значения элемента. Событиесhange
в отличие от событияinput
также работает с элементамиkeygen
иselect
. Для радиокнопок (radiobuttons
) и флажков (checkboxes
) событиеchange
происходит при изменении состояния этих элементов. - input - событие происходит после того как изменяется значение элемента
input
или элементаtextarea
. - invalid - событие происходит, когда элемент
input
, данные которого необходимо отправить вместе с другими данными формы на сервер, содержит недопустимые данные. - reset - событие происходит перед очисткой формы, которая осуществляется элементом
input
сtype="reset"
. - search - событие возникает после того как пользователь нажимает на клавишу Enter или нажимает кнопку "
x
" (отмена) в элементеinput
сtype="search"
. - select - событие происходит после того как Вы выбрали некоторый текст в элементе. Событие
select
в основном используется для элементаinput
сtype="text"
илиtextarea
. - submit - событие происходит перед отправкой формы на сервер.
События перетаскивания
События, связанные с перетаскиваемым объектом (draggable target, исходный объект):
- dragstart – событие происходит, когда пользователь начал перетаскивать элемент;
- drag – событие происходит, когда пользователь перетаскивает элемент;
- dragend – событие происходит, когда пользователь закончил перетаскивания элемента, т.е. когда отпустил курсор мыши.
События, связанные с объектом (drop target), который принимает перетаскиваемый объект (draggable target):
- dragenter – событие происходит, когда перетаскиваемый объект (draggable target) вошёл в область элемента (drop target), который может принять перетаскиваемый объект (draggable target).
- ragleave – событие происходит, когда перетаскиваемый объект (draggable target) покидает пределы элемента (drop target), который может его принять.
- dragover - событие происходит, когда перетаскиваемый объект (draggable target) перемещается в области элемента (drop target), который может его принять.
- drop - событие происходит, когда пользователь отпускает перетаскиваемый объект (draggable target) в область элемента (drop target), который может его принять.
События буфера обмена
- сopy - событие происходит, когда пользователь копирует содержимое элемента. Событие
copy
также происходит, когда пользователь копирует элемент (например, изображения, созданные с помощью элементаimg
). Событиеcopy
используется в основном для элементовinput
сtype="text"
. - сut - событие происходит, когда пользователь вырезает содержимое элемента.
- paste - событие происходит, когда пользователь вставляет некоторое содержимое в элемент.
События печати
- afterprint - событие происходит, когда страница начинает печататься (т.е. после нажатия кнопки "Печать" в диалоговом окне) или если диалоговое окно "Печать" было закрыто.
- beforeprint - событие возникает перед печатью страницы, т.е. до открытия диалогового окна "Печать".
События, посылаемые сервером
- error - событие возникает при возникновении ошибки с источником события. Ошибка обычно возникает, когда связь нарушается. Если это произойдет, то объект
EventSource
будет автоматически пытаться подключиться к серверу. - open - событие возникает, когда соединение с источником события открыто.
- message - событие возникает, когда сообщение получено через источник события.
Объектevent
событияmessage
поддерживает следующие свойства:data
- содержит сообщение.origin
- URL документа, который вызвал событие.lastEventId
- идентификатор (id
) последнего полученного сообщения.
События мультимедиа
В процессе загрузки аудио/видео события происходят в следующем порядке: loadstart
-> durationchange
-> loadedmetadata
-> loadeddata
-> progress
-> canplay
-> canplaythrough
.
- abort - событие возникает, когда прерывается загрузка аудио/видео. Это событие возникает именно когда загрузка медиа данных была прервана (отменена), а не, потому что возникла ошибка.
- error - событие возникает, когда произошла ошибка при загрузке аудио/видео.
- stalled - событие возникает, когда браузер пытается получить медиа данные, но данные недоступны.
- suspend - событие возникает, когда браузер не может получить медиа данные, т.е. загрузка медиа останавливается по какой-то причине.
- loadstart - событие происходит, когда браузер начинает искать указанное аудио/видео, т.е. когда начинается процесс загрузки.
- durationchange - событие возникает, когда изменяется длительность аудио/видео. Если аудио/видео загружается, то длительность будет меняться от значения "NaN" до фактической длительности аудио/видео.
- loadedmetadata - событие возникает, когда метаданные для указанного аудио/видео загружены. Метаданные аудио/видео состоят из: длительности, размера (только видео) и текстовой дорожки.
- loadeddata - событие возникает, после того как первый кадр медиа загрузился.
- progress - событие происходит, когда браузер загружает указанное аудио/видео.
- canplay - событие возникает, когда браузер может начать воспроизведение указанного аудио/видео (т.е. когда буферизация потока аудио/видео достаточна для того чтобы браузер мог начать его воспроизводить).
- canplaythrough - событие возникает в тот момент времени, когда браузер может проигрывать указанное медиа без остановки на буферизацию.
- ended - событие происходит, когда воспроизведение аудио/видео завершилось (достигло конца). Это событие может использоваться для вывода сообщений типа "Спасибо за внимание", "Спасибо за просмотр" и др.
- pause - событие происходит, когда воспроизведение аудио/видео приостановлено пользователем или с помощью кода (программно).
- play - событие происходит, когда начинается воспроизведение аудио/видео. Оно также происходит, когда аудио/видео было снято с паузы и начинает воспроизводиться.
- playing - событие происходит, когда аудио/видео воспроизводится после того как оно было поставлено на паузу или остановилось для буферизации.
- ratechange - событие происходит, когда изменяется скорость воспроизведения аудио/видео.
- seeking - событие происходит, когда пользователь начинает перемещение ползунка (переход) к новой временной позиции проигрываемого аудио/видео.
- seeked - событие происходит, когда пользователь закончил перемещение ползунка (переход) в новую временную позицию проигрываемого аудио/видео. Событие
seeked
противоположно событиюseeking
. Для того чтобы получить текущую позицию воспроизведения, используйте свойствоcurrentTime
объектаAudio
/Video
. - timeupdate - событие происходит при изменении временной позиции воспроизводимого аудио/видео.
Это событие происходит:- при воспроизведении потока аудио/видео.
- при перемещении ползунка в новую временную позицию воспроизводимого аудио/видео.
timeupdate
часто используется вместе со свойством объектаAudio
/Video
currentTime
, которое возвращает текущую временную позицию воспроизводимого аудио/видео в секундах. - volumechange – событие происходит каждый раз при изменении громкости воспроизводимого потока видео/аудио.
Это событие происходит, при:- увеличении или уменьшении громкости;
- отключении или включении звука.
- waiting - событие происходит, когда видео останавливается для буферизации.
Разные события
- toggle - событие происходит, когда пользователь открывает или закрывает элемент
details
. Элементdetails
предназначен для создания дополнительных сведений, которые пользователь при необходимости может просматривать или скрывать. - wheel - событие происходит при прокручивании колеса мыши вперёд или назад над элементом.
Задания
- Является ли событие "Нажатие клавиши на клавиатуре (
onkeypress
)" сложным? И если является, то в результате, каких простых событий оно возникает? - Например, у Вас есть 2 элемента
р
и пользователь перемещает мышку с области, принадлежащей одному элементур
, на область, принадлежащую другому элементур
. То, какие в этом случае возникают события, и какие элементы их генерируют?
А как можно отличить закрытие вкладки/браузера от перезагрузки страницы?
Задача в том, чтобы отправлять серверу команду только если вкладка действительно закрывается.
Если я правильно понимаю при перезагрузке страницы сначала возникают beforeunload и unload и только потом документ загружается.
— Google Chrome, Версия 86.0.4240.111,
— Opera, Версия:72.0.3815.320,
при обновлении страницы не возникает события unload
В FireFox, Версия 83.0 — все наоборот при обновлении возникают оба (beforeunload и unload) а при закрытии только beforeunload.
Таким образом можно отличить обновление страницы от закрытия.
ie и safari пока не тестировал.
То-есть по большому счету и клавиши можно не отслеживать.
Может кому-то будет полезно.
Открываю страницу в Chrome, а затем перезагружаю. Событие unload возникает:
JS (vue)
Ну и соответственно evlist.php:
ну и смотрим содержимое файла events.log
Мне надо отдавать бэкэнду команду только при закрытии вкладки.
Основная задача — убить PHP сессию по закрытию пользователем сайта.
Документация по PHP говорит примерно следующее:
«Когда мы делаем session_start(); если PHP получает куку — возобновляет сессию, не получает куку, — то стартует новую сессию и отдает клиенту куку с PHPSESSID.
Чтобы кука стала сессионной (до закрытия браузера) делайте session_set_cookie_params(0);
перед каждым session_start().»
Может оно конечно и работает так как говорит документация, может чтобы оно работало надо Целиком Браузер закрыть.
Но все же мы усиленно используем вкладки, а вот на закрытие вкладки оно у меня пока не заработало так, как написано.
сделал вот так.
задумка такая. при вызове экранной клавиатуры на iOS, сдвигается окно. нажав кнопку «готово» (done) клавиатура убирается, у элементов input фокус убирается, но окно не возвращается в прежнюю позицию. попробовал отследить событие blur у input и если элемент без фокуса — вернуть скролл окна в старое положение. через event blur не получилось, попробовал через event.relatedTarget. он дает Null если нажата кнопка «готово».
Пытаюсь в форму с несколькими input добавить обработчик события blur. Задача такая — если все поля без фокуса, выводим сообщение.
Этот скрипт не срабатывает. Если заменить 'form' на 'input', то работает некорректно. при переходе от одного поля к другому срабатывает условие, хотя второе поле становится в фокусе. Таймер тоже не помогает. Как сделать, чтобы условие отрабатывалось только когда все элементы input без фокуса?
В этом году выходит ES6 (там будут классы начледование как в настоящем ООП) и сразу после него Ангуляр 2, планируешь делать уроки по ним?
Уроки по ECMAScript 6 планирую в виде нового раздела в категории, посвященной изучению JavaScript.
Про Angular 2 писать пока не собираюсь, возможно, позже, когда завершу начатые разделы.