HTML DOM Событие

События HTML DOM

События HTML DOM позволяют JavaScript регистрировать различные обработчики событий на элементах HTML-документа.

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

Совет:Модель событий стандартизирована в W3C DOM Level 2 Events.

События HTML DOM

DOM：Указывает используемый уровень атрибутов DOM.

События мыши

Attribute Описание DOM
onclick Обработчик события, вызываемый при щелчке пользователем по объекту. 2
oncontextmenu Срабатывает, когда пользователь щелкает правой кнопкой мыши, чтобы открыть контекстное меню  
ondblclick Обработчик события, вызываемый при двойном щелчке пользователем по объекту. 2
onmousedown Кнопка мыши нажата. 2
onmouseenter Срабатывает, когда указатель мыши перемещается на элемент. 2
onmouseleave Срабатывает, когда указатель мыши покидает элемент. 2
onmousemove Мышь перемещена. 2
onmouseover Мышь перемещается над элементом. 2
onmouseout Мышь перемещается от элемента. 2
onmouseup Кнопка мыши отпущена. 2

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

Attribute Описание DOM
onkeydown Клавиша клавиатуры нажата. 2
onkeypress Клавиша клавиатуры нажата и отпущена. 2
onkeyup Клавиша клавиатуры отпущена. 2

События фреймов/объектов

Attribute Описание DOM
onabort Загрузка изображения прервана. ( <object>) 2
onbeforeunload Это событие срабатывает, когда пользователь собирается покинуть страницу (обновление или закрытие). 2
onerror Ошибка возникает при загрузке документа или изображения. ( <object>, <body> и <frameset>)  
onhashchange Это событие срабатывает, когда якорная часть текущего URL изменяется.  
onload Страница или изображение завершили загрузку. 2
onpageshow Это событие срабатывает, когда пользователь посещает страницу.
onpagehide Это событие срабатывает, когда пользователь покидает текущую страницу и переходит на другую страницу.
onresize Размер окна или фрейма изменяется. 2
onscroll Событие, возникающее при прокрутке документа. 2
onunload Пользователь покидает страницу. ( <body> и <frameset>) 2

События формы

Attribute Описание DOM
onblur Срабатывает, когда элемент теряет фокус. 2
onchange Это событие срабатывает, когда содержимое элемента формы изменяется ( <input>, <keygen>, <select> и <textarea>) 2
onfocus Срабатывает, когда элемент получает фокус. 2
onfocusin Срабатывает, когда элемент вот-вот получит фокус. 2
onfocusout Срабатывает, когда элемент вот-вот потеряет фокус. 2
oninput Срабатывает, когда элемент получает пользовательский ввод. 3
onreset Срабатывает при сбросе формы. 2
onsearch Срабатывает, когда пользователь вводит текст в поле поиска ( <input="search">)  
onselect Срабатывает, когда пользователь выделяет текст ( <input> и <textarea>) 2
onsubmit Срабатывает при отправке формы. 2

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

Attribute Описание DOM
oncopy Это событие срабатывает, когда пользователь копирует содержимое элемента.  
oncut Это событие срабатывает, когда пользователь вырезает содержимое элемента.  
onpaste Это событие срабатывает, когда пользователь вставляет содержимое элемента.  

События печати

Attribute Описание DOM
onafterprint Это событие срабатывает после начала печати страницы или когда окно печати было закрыто.  
onbeforeprint Это событие срабатывает, когда страница собирается начать печать.  

События перетаскивания

Event Описание DOM
ondrag Это событие срабатывает, когда элемент перетаскивается.  
ondragend Это событие срабатывает, когда пользователь завершает перетаскивание элемента.  
ondragenter Это событие срабатывает, когда перетаскиваемый элемент входит в цель сброса.  
ondragleave Это событие срабатывает, когда перетаскиваемый элемент покидает цель сброса.  
ondragover Это событие срабатывает, когда перетаскиваемый элемент находится над целью сброса.  
ondragstart Это событие срабатывает, когда пользователь начинает перетаскивать элемент.  
ondrop Это событие срабатывает, когда перетаскиваемый элемент сбрасывается на целевую область.  

Медиа-события

Event Описание DOM
onabort Событие срабатывает, когда видео/аудио (аудио/видео) прерывает загрузку.  
oncanplay Событие срабатывает, когда пользователь может начать воспроизведение видео/аудио (аудио/видео).  
oncanplaythrough Событие срабатывает, когда видео/аудио (аудио/видео) может нормально воспроизводиться без пауз и буферизации.  
ondurationchange Событие срабатывает, когда изменяется продолжительность видео/аудио (аудио/видео).  
onemptied Срабатывает, когда текущий плейлист пуст.  
onended Событие срабатывает, когда заканчивается воспроизведение видео/аудио (аудио/видео).  
onerror Событие срабатывает, когда возникает ошибка при загрузке данных видео/аудио (аудио/видео).  
onloadeddata Событие срабатывает, когда браузер загружает текущий кадр видео/аудио (аудио/видео).  
onloadedmetadata Событие срабатывает после загрузки метаданных указанного видео/аудио (аудио/видео).  
onloadstart Событие срабатывает, когда браузер начинает поиск указанного видео/аудио (аудио/видео).  
onpause Событие срабатывает, когда видео/аудио (аудио/видео) приостановлено.  
onplay Событие срабатывает, когда видео/аудио (аудио/видео) начинает воспроизведение.  
onplaying Событие срабатывает, когда видео/аудио (аудио/видео) приостановлено или готово возобновить воспроизведение после буферизации.  
onprogress Событие срабатывает, когда браузер загружает указанное видео/аудио (аудио/видео).  
onratechange Событие срабатывает, когда изменяется скорость воспроизведения видео/аудио (аудио/видео).  
onseeked Событие срабатывает после того, как пользователь перемещает позицию воспроизведения видео/аудио (аудио/видео).  
onseeking Событие срабатывает, когда пользователь начинает перематывать видео/аудио (аудио/видео).  
onstalled Событие срабатывает, когда браузер запрашивает медиаданные, но медиаданные недоступны.  
onsuspend Событие срабатывает, когда браузер прерывает чтение медиаданных.  
ontimeupdate Событие срабатывает, когда изменяется текущая позиция воспроизведения.  
onvolumechange Событие срабатывает, когда изменяется громкость.  
onwaiting Событие срабатывает, когда видео требуется буферизация, чтобы воспроизвести следующий кадр.  

События анимации

Event Описание DOM
animationend Это событие срабатывает, когда CSS-анимация завершает воспроизведение.  
animationiteration Это событие срабатывает при повторении CSS-анимации.  
animationstart Это событие срабатывает, когда начинается воспроизведение CSS-анимации.  

События transition

Event Описание DOM
transitionend Это событие срабатывает после завершения CSS-перехода.  

Другие события

Event Описание DOM
onmessage Это событие срабатывает при получении сообщения через объект или от объекта (WebSocket, Web Worker, Event Source, дочерний фрейм или родительское окно).  
onmousewheel Устарело.Вместо этого используйте событиеonwheel.  
ononline Это событие срабатывает, когда браузер начинает работать онлайн.  
onoffline Это событие срабатывает, когда браузер начинает работать офлайн.  
onpopstate Это событие срабатывает при изменении истории просмотров (объекта history) окна.  
onshow Это событие срабатывает, когда элемент <menu> отображается в контекстном меню.  
onstorage Это событие срабатывает, когда обновляется Web Storage (HTML 5 Web Storage).  
ontoggle Это событие срабатывает, когда пользователь открывает или закрывает элемент <details>.  
onwheel Это событие срабатывает, когда колесо мыши прокручивается вверх или вниз над элементом.  
visibilitychange Это событие используется для определения, изменилось ли состояние видимости текущей страницы.  

Объект Event

Константы

Статические переменные Описание DOM
CAPTURING-PHASE Текущая фаза события — фаза захвата (1) 1
AT-TARGET Текущее событие — целевая фаза, обрабатывается целевое событие (1) 2
BUBBLING-PHASE Текущее событие — фаза всплытия (3) 3

Свойства

Свойства Описание DOM
bubbles Возвращает логическое значение, указывающее, является ли событие типом всплывающего события. 2
cancelable Возвращает логическое значение, указывающее, имеет ли событие отменяемое действие по умолчанию. 2
currentTarget Возвращает элемент, чей слушатель событий инициировал событие. 2
eventPhase Возвращает текущую фазу распространения события. 2
target Возвращает элемент, вызвавший это событие (целевой узел события). 2
timeStamp Возвращает дату и время, когда событие было сгенерировано. 2
type Возвращает имя события, представленного текущим объектом Event. 2

Методы

Методы Описание DOM
initEvent() Инициализирует свойства только что созданного объекта Event. 2
preventDefault() Сообщает браузеру, что не следует выполнять действие по умолчанию, связанное с событием. 2
stopPropagation() Останавливает распространение события. 2

Объект целевого события

Методы

Методы Описание DOM
addEventListener() Позволяет регистрировать события слушателей на целевом событии (IE8 = attachEvent()) 2
dispatchEvent() Позволяет отправлять события слушателям (IE8 = fireEvent()) 2
removeEventListener() Один раз запускает событие слушателя, зарегистрированное на цели события (IE8 = detachEvent()) 2

Объект слушателя событий

Методы

Методы Описание DOM
handleEvent() Регистрирует любой объект как обработчик событий. 2

Объект события документа

Методы

Методы Описание DOM
createEvent()   2

Объекты событий мыши/клавиатуры

Свойства

Свойства Описание DOM
altKey Возвращает, была ли нажата клавиша "ALT" при срабатывании события. 2
button Возвращает, какая кнопка мыши была нажата при срабатывании события. 2
clientX Возвращает горизонтальную координату указателя мыши при срабатывании события. 2
clientY Возвращает вертикальную координату указателя мыши при срабатывании события. 2
ctrlKey Возвращает, была ли нажата клавиша "CTRL" при срабатывании события. 2
Расположение Возвращает положение клавиши на устройстве. 3
charCode Возвращает код символа значения клавиши, вызвавшей событие onkeypress. 2
key Возвращает идентификатор клавиши при нажатии клавиши. 3
keyCode Возвращает код символа значения клавиши, вызванного событием onkeypress, или код клавиши события onkeydown или onkeyup. 2
which Возвращает код символа значения клавиши, вызванного событием onkeypress, или код клавиши события onkeydown или onkeyup. 2
metaKey Возвращает, была ли нажата клавиша "meta" при срабатывании события. 2
relatedTarget Возвращает узел, связанный с целевым узлом события. 2
screenX Возвращает горизонтальную координату указателя мыши при срабатывании события. 2
screenY Возвращает вертикальную координату указателя мыши при срабатывании события. 2
shiftKey Возвращает, была ли нажата клавиша "SHIFT" при срабатывании события. 2

Методы

Методы Описание W3C
initMouseEvent() Инициализирует значение объекта события мыши. 2
initKeyboardEvent() Инициализирует значение объекта события клавиатуры. 3
Другие расширения