JavaScript Events List
Чтобы посмотреть примеры работы событий — жмите на ссылки (они привязаны к названиям событий). Перевод с W3Schools.
События мыши
Event | Description | DOM |
---|---|---|
onclick | Событие происходит, когда пользователь кликает на элемент | 2 |
oncontextmenu | Событие происходит, когда пользователь кликает на элемент правой кнопкой мыши, чтобы открыть контекстное меню | 3 |
ondblclick | Событие происходит, когда пользователь кликает на элемент двойным кликом | 2 |
onmousedown | Событие происходит, когда пользователь нажал на элемент кнопкой мыши | 2 |
onmouseenter | Событие происходит, когда курсор заезжает на элемент | 2 |
onmouseleave | Событие происходит, когда курсор съезжает с элемента | 2 |
onmousemove | Событие происходит, когда курсором водят над элементом | 2 |
onmouseover | Событие происходит, когда курсор заезжает на элемент или на его дочерние элементы | 2 |
onmouseout | Событие происходит, когда курсор съезжает с элемента или его дочерних элементов | 2 |
onmouseup | Событие происходит, когда пользователь отпускает мышь над элементом | 2 |
События клавиатуры
Event | Description | DOM |
---|---|---|
onkeydown | Событие происходит, когда пользователь жмет на клавишу | 2 |
onkeypress | Событие происходит, когда пользователь нажимает на клавишу | 2 |
onkeyup | Событие происходит, когда пользователь отпускает клавишу | 2 |
События включаемых объектов
Event | Description | DOM |
---|---|---|
onabort | Событие происходит, когда загрузка объекта прерывается | 2 |
onbeforeunload | Событие происходит, когда собираются отменить загрузку документа | 2 |
onerror | Событие происходит, когда происходит ошибка во время загрузки удаленного файла | 2 |
onhashchange | Событие происходит, когда происходят изменения в якорной части адреса страницы (якорь после хештега) | 3 |
onload | Событие происходит, когда объект загрузился | 2 |
onpageshow | Событие происходит, когда пользователь переходит на веб-страницу | 3 |
onpagehide | Событие происходит, когда пользователь уходит с веб-страницы | 3 |
onresize | Событие происходит, когда изменияется размер вьюпорта (на ресайз страницы) | 2 |
onscroll | Событие происходит на скролл | 2 |
onunload | Событие происходит на закрытие или перезагрузку страницы (на анлоад) | 2 |
События формы
Event | Description | DOM |
---|---|---|
onblur | Событие происходит, когда элемент теряет фокус (уход с инпута например) | 2 |
onchange | Событие происходит, когда меняется состояние элемента — содержимое, выделение, отметка чекбокса (для <input>, <keygen>, <select> и <textarea>) | 2 |
onfocus | Событие происходит, когда элемент получает фокус | 2 |
onfocusin | Событие происходит, когда элемент собирается получить фокус | 2 |
onfocusout | Событие происходит, когда элемент собирается потерять фокус | 2 |
oninput | Событие происходит, когда пользователь вводит текст в поле (в инпут) | 3 |
oninvalid | Событие происходит, когда элемент не работает (инвалидный) | 3 |
onreset | Событие происходит, когда переустанавливают все значения формы в состояние по умолчанию (ресет) | 2 |
onsearch | Событие происходит, когда пользователь вводит значения в поле поиска (в <input=»search»>) | 3 |
onselect | Событие происходит, когда пользователь выделяет текст в поле (для <input> и <textarea>) | 2 |
onsubmit | Событие происходит на отправку формы | 2 |
События перетаскивания (drag)
Event | Description | DOM |
---|---|---|
ondrag | элемент перетаскивается | 3 |
ondragend | пользователь закончил перетаскивать элемент | 3 |
ondragenter | когда перетаскиваемый элемент попадает в целевую область (куда перетаскивают) | 3 |
ondragleave | когда элемент покидает целевую область | 3 |
ondragover | когда элемент находится над целевой областью | 3 |
ondragstart | когда пользователь начал перетаскивать элемент | 3 |
ondrop | когда элемент заброшен в целевую область | 3 |
События буфера обмена
Event | Description | DOM |
---|---|---|
oncopy | когда элемент копируется | |
oncut | когда элемент вырезается | |
onpaste | когда элемент вставляется |
События печати
Event | Description | DOM |
---|---|---|
onafterprint | когда начинается печать или закрывается диалоговое окно принтера | 3 |
onbeforeprint | когда страницу собираются печатать | 3 |
Медиа события
Event | Description | DOM |
---|---|---|
onabort | когда загрузка медиа-файла прерывается | 3 |
oncanplay | когда браузер готов отображать медиа-файл (когда медиа-файл загрузился достаточно для старта показа) | 3 |
oncanplaythrough | когда медиа-файл может проигрываться без перерывов на буферизацию | 3 |
ondurationchange | когда изменяется продолжительность медиа-файла (когда видео или аудио заканчивает загружаться, продолжительность меняется с «NaN» на реальное значение | 3 |
onemptied | когда случается что-то плохое, и медиа-файл внезапно недоступен (например, нарушение интернет-связи) | 3 |
onended | когда медиа-файл достигает своего окончания (полезно для сообщений «спасибо за просмотр») | 3 |
onerror | когда происходит ошибка во время загрузки медиа-файла | 3 |
onloadeddata | когда медиа-дата загрузилась | 3 |
onloadedmetadata | когда мета-дата загрузилась (типа размеров и продолжительности) | 3 |
onloadstart | когда браузер начинает искать указанный медиа-файл | 3 |
onpause | когда медиа-файл поставлен на паузу — вручную или программно | 3 |
onplay | когда медиа-файл начинает проигрывание или снят с паузы | 3 |
onplaying | когда медиа-файл играет после паузы или буферизации | 3 |
onprogress | когда браузер находится в процессе получения медиа-даты (загрузки медиа-файла) | 3 |
onratechange | когда меняется скорость проигрывания медиа-файла | 3 |
onseeked | когда пользователь закончил переход на новую позицию в медиа-файле (перескок дальше/ближе к началу/концу) | 3 |
onseeking | когда пользователь начал поиск новой позиции в медиа-файле | 3 |
onstalled | когда браузер начинает поиск медиа-даты, но она недоступна | 3 |
onsuspend | когда браузер намеренно не получает медиа-дату (пользователь прерывает загрузку) | 3 |
ontimeupdate | когда изменяется позиция проигрывания (например, когда пользователь перетаскивает бегунок ближе к концу файла) | 3 |
onvolumechange | когда меняется уровень звука (в том числе включение/выключение звука) | 3 |
onwaiting | когда медиа-файл встал на паузу, но предполагается, что он продолжит проигрывание (как например остановка на буферизацию) | 3 |
События анимации
Event | Description | DOM |
---|---|---|
animationend | когда CSS-анимация закончилась | 3 |
animationiteration | когда CSS-анимация повторяется | 3 |
animationstart | когда CSS-анимация стартовала | 3 |
События CSS-Transition (трансформации)
Event | Description | DOM |
---|---|---|
transitionend | когда CSS-transition закончена | 3 |
События, которые присылает сервер
Event | Description | DOM |
---|---|---|
onerror | когда происходит ошибка в источнике элемента | |
onmessage | когда приходит сообщение от элемента | |
onopen | когда открывается источник события |
Разные события
Event | Description | DOM |
---|---|---|
onmessage | когда получено сообщение через или от объекта (WebSocket, Web Worker, Event Source, дочерний frame или родительское окно) | 3 |
onmousewheel | Устаревшее. Используйте событие onwheel вместо этого | |
ononline | когда браузер начинает работать онлайн | 3 |
onoffline | когда браузер начинает работать офлайн | 3 |
onpopstate | когда изменяется история в адресной строке (на клик кнопок вперед/назад рядом с адресной строкой например) | 3 |
onshow | когда элемент <menu> показывается как контекстное меню | 3 |
onstorage | когда обновилось состояние веб-хранилища (Web Storage) | 3 |
ontoggle | когда пользователь открывает/закрывает элемент <details> | 3 |
onwheel | когда происходит прокрутка мыши вверх или вниз над элементом | 3 |
События на касание (тач-ивенты)
Event | Description | DOM |
---|---|---|
ontouchcancel | когда прервано касание | |
ontouchend | когда палец убран с тач-скрина | |
ontouchmove | когда пальцем водят по тач-скрину | |
ontouchstart | когда палец приложен к тач-скрину |
События объектов
Константы
Constant | Description | DOM |
---|---|---|
CAPTURING_PHASE | текущее состояние события — фаза захвата | 1 |
AT_TARGET | текущее событие в целевой фазе (target phase), например, оценивается цель события | 2 |
BUBBLING_PHASE | текущее событие в фазе бабблинга (всплытия и перехвата) | 3 |
Свойства
Property | Description | DOM |
---|---|---|
bubbles | возвращает является ли текущее событие бабблингом | 2 |
cancelable | возвращает, может ли событие быть отменено | 2 |
currentTarget | возвращает элемент, чьи приемники событий (event listeners — ивент-листенеры) запустили событие | 2 |
defaultPrevented | возвращает, был ли вызван метод preventDefault() для события | 3 |
eventPhase | возвращает, какая фаза потока события в данный момент оценивается | 2 |
isTrusted | возвращает, можно ли доверять событию | 3 |
target | возвращает элемент, который запустил событие | 2 |
timeStamp | возвращает время (в милисекундах, относительно эпохи), с тех пор, как событие было изобретено (с полночи 1 января 1970 года) | 2 |
type | возвращает имя события | 2 |
view | возвращает объект Window, где произошло событие | 2 |
Методы
Method | Description | DOM |
---|---|---|
preventDefault() | отменяет дефолтное событие (если оно может быть отменено), то есть событие, котрое является нативным для элемента, не произойдет | 2 |
stopImmediatePropagation() | другие листенеры (listeners) того же события, не будут вызваны | 3 |
stopPropagation() | предотвращает дальнейшее распространение события в течение событийного потока | 2 |
Объект MouseEvent (мышь)
Property | Description | DOM |
---|---|---|
altKey | возвращает, был ли нажат «ALT» во время запуска события мыши | 2 |
button | возвращает, какая кнопка мыши была нажата во время запуска события мыши | 2 |
buttons | возвращает, какие кнопки мыши были нажаты во время запуска события мыши | 3 |
clientX | возвращает горизонтальную координату курсора относительно текущего окна во время запуска события мыши | 2 |
clientY | возвращает вертикальную координату курсора относительно текущего окна во время запуска события мыши | 2 |
ctrlKey | возвращает, был ли нажат «CTRL» во время запуска события мыши | 2 |
detail | возвращает, сколько раз кликнули мышью (одинарный или двойной клик) | 2 |
metaKey | возвращает, была ли нажата клавиша «META» во время запуска события мыши | 2 |
pageX | возвращает горизонтальную координату курсора относительно текущего документа во время запуска события мыши | |
pageY | возвращает вертикальную координату курсора относительно текущего документа во время запуска события мыши | |
relatedTarget | возвращает элемент, относящийся к элементу, который запустил событие (посмотрите пример по ссылке) | 2 |
screenX | возвращает горизонтальную координату курсора относительно текущего экрана во время запуска события мыши | 2 |
screenY | возвращает вертикальную координату курсора относительно текущего экрана во время запуска события мыши | 2 |
shiftKey | возвращает, был ли нажат «SHIFT» во время запуска события мыши | 2 |
which | возвращает, какая кнопка мыши была нажата во время запуска события мыши | 2 |
Объект KeyboardEvent (клавиатура)
Property | Description | DOM |
---|---|---|
altKey | возвращает, был ли нажат «ALT» во время запуска события клавиатуры | 2 |
ctrlKey | возвращает, был ли нажат «CTRL» во время запуска события клавиатуры | 2 |
charCode | возвращает знак Unicode клавиши, которой запустили событие | 2 |
key | возвращает значение клавиши, которой запустили событие | 3 |
keyCode | возвращает Unicode код клавиши, которая запустила событие onkeypress, onkeydown или onkeyup | 2 |
location | возвращает положение клавиши на клавиатуре, которой запустили событие | 3 |
metaKey | возвращает, была ли нажата клавиша «META» во время запуска события клавиатуры | 2 |
shiftKey | возвращает, был ли нажат «SHIFT» во время запуска события клавиатуры | 2 |
which | возвращает Unicode код клавиши, которая запустила событие onkeypress, onkeydown или onkeyup | 2 |
Объект HashChangeEvent (смена объекта хеш)
Property | Description | DOM |
---|---|---|
newURL | возвращает URL документа после изменения хеша | |
oldURL | возвращает URL документа до изменения хеша |
Объект PageTransitionEvent (трансформации страницы)
Property | Description | DOM |
---|---|---|
persisted | возвращает, была ли страница закеширована |
Объект FocusEvent (фокус)
Property | Description | DOM |
---|---|---|
relatedTarget | возвращает элемент, который относится к элементу, вызвавшему событие (related element) | 3 |
Объект AnimationEvent (анимация)
Property | Description | DOM |
---|---|---|
animationName | возвращает название (имя) анимации | |
elapsedTime | возвращает количество секунд, которое прошло с начала анимации |
Объект TransitionEvent (трансформация)
Property | Description | DOM |
---|---|---|
propertyName | возвращает имя CSS-свойства, связанного с трансформацией | |
elapsedTime | возвращает количество секунд, которое прошло с начала анимации |
Объект WheelEvent (колёсико мыши)
Property | Description | DOM |
---|---|---|
deltaX | возвращает, сколько было проскроллено по горизонтали (x-axis) | 3 |
deltaY | возвращает, сколько было проскроллено по вертикали (y-axis) | 3 |
deltaZ | возвращает, сколько было проскроллено по оси Z (z-axis) | 3 |
deltaMode | возвращает число, котрое представляет собой единицу измерения для значений дельта — пикселей, линий или страниц (Returns a number that represents the unit of measurements for delta values — pixels, lines or pages) | 3 |
You must be logged in to post a comment.