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.