HTML DOM События
События
События HTML DOM позволяют JavaScript регистрировать различные обработчики событий в элементы в документе HTML.
События обычно используются в сочетании с функциями, и функция не будет выполняться до наступления события. (например, когда пользователь нажимает кнопку).
Учебное пособие по событиям см. в Руководство по событиям JavaScript.
События | Описание | Принадлежит |
---|---|---|
abort | Событие происходит, когда загрузка мультимедиа прерывается | UiEvent, Event |
afterprint | Событие происходит, когда страница начала печать или если диалоговое окно печати было закрыто | Event |
animationend | Событие происходит, когда анимация CSS завершена | AnimationEvent |
animationiteration | Событие происходит при повторении CSS анимации | AnimationEvent |
animationstart | Событие происходит при запуске CSS анимации | AnimationEvent |
beforeprint | Событие происходит перед печатью страницы | Event |
beforeunload | Событие происходит перед выгрузкой документа | UiEvent, Event |
blur | Событие происходит, когда элемент теряет фокус | FocusEvent |
canplay | Событие возникает, когда браузер может начать воспроизведение мультимедиа (когда он буферизован достаточно, чтобы начать) | Event |
canplaythrough | Событие возникает, когда браузер может воспроизводить мультимедиа без остановка для буферизации | Event |
change | Событие происходит при изменении содержимого элемента формы, выделения или отмеченного состояния (для <input>, <select> и <textarea>) | Event |
click | Событие происходит, когда пользователь нажимает на элемент | MouseEvent |
contextmenu | Событие происходит, когда пользователь щелкает правой кнопкой мыши элемент, чтобы открыть контекстное меню | MouseEvent |
copy | Событие происходит, когда пользователь копирует содержимое элемента | ClipboardEvent |
cut | Событие происходит, когда пользователь вырезает содержимое элемента | ClipboardEvent |
dblclick | Событие происходит, когда пользователь дважды щелкает элемент | MouseEvent |
drag | Событие происходит при перетаскивании элемента | DragEvent |
dragend | Событие происходит, когда пользователь закончил перетаскивать элемент | DragEvent |
dragenter | Событие происходит, когда перетаскиваемый элемент попадает в цель перетаскивания | DragEvent |
dragleave | Событие происходит, когда перетаскиваемый элемент покидает цель перетаскивания | DragEvent |
dragover | Событие происходит, когда перетаскиваемый элемент находится над целью перетаскивания | DragEvent |
dragstart | Событие происходит, когда пользователь начинает перетаскивать элемент | DragEvent |
drop | Событие происходит, когда перетаскиваемый элемент отбрасывается на цель перетаскивания | DragEvent |
durationchange | Событие происходит при изменении продолжительности медиа | Event |
ended | Событие происходит, когда носитель подошел к концу (полезно для сообщений типа "спасибо за прослушивание") | Event |
error | Событие возникает при возникновении ошибки при загрузке внешнего файла | ProgressEvent, UiEvent, Event |
focus | Событие происходит, когда элемент получает фокус | FocusEvent |
focusin | Событие происходит, когда элемент собирается получить фокус | FocusEvent |
focusout | Событие происходит, когда элемент собирается потерять фокус | FocusEvent |
fullscreenchange | Событие происходит, когда элемент отображается в полноэкранном режиме | Event |
fullscreenerror | Событие возникает, когда элемент не может отображаться в полноэкранном режиме | Event |
hashchange | Событие происходит, когда были внесены изменения в якорную часть URL | HashChangeEvent |
input | Событие происходит, когда элемент получает ввод пользователя | InputEvent, Event |
invalid | Событие происходит, когда элемент недействителен | Event |
keydown | Событие происходит, когда пользователь нажимает клавишу | KeyboardEvent |
keypress | Событие происходит, когда пользователь нажимает клавишу | KeyboardEvent |
keyup | Событие происходит, когда пользователь отпускает клавишу | KeyboardEvent |
load | Событие возникает при загрузке объекта | UiEvent, Event |
loadeddata | Событие происходит при загрузке медиа-данных | Event |
loadedmetadata | Событие происходит при загрузке метаданных (например, размеров и продолжительности) | Event |
loadstart | Событие происходит, когда браузер начинает поиск указанного носителя | ProgressEvent |
message | Событие происходит, когда сообщение получено через источник события | Event |
mousedown | Событие происходит, когда пользователь нажимает кнопку мыши над элементом | MouseEvent |
mouseenter | Событие происходит, когда указатель перемещается на элемент | MouseEvent |
mouseleave | Событие происходит, когда указатель перемещается за пределы элемента | MouseEvent |
mousemove | Событие происходит, когда указатель перемещается, когда он находится над элементом | MouseEvent |
mouseover | Событие происходит, когда указатель перемещается на элемент или на один из его дочерних элементов | MouseEvent |
mouseout | Событие происходит, когда пользователь перемещает указатель мыши за пределы элемента или одного из его дочерних элементов | MouseEvent |
mouseup | Событие происходит, когда пользователь отпускает кнопку мыши над элементом | MouseEvent |
mousewheel | Устарело. Вместо этого используйте wheel | WheelEvent |
offline | Событие происходит, когда браузер начинает работать в автономном режиме | Event |
online | Событие происходит, когда браузер начинает работать в сети | Event |
open | Событие происходит при открытии соединения с источником события | Event |
pagehide | Событие происходит, когда пользователь уходит с веб страницы | PageTransitionEvent |
pageshow | Событие происходит, когда пользователь переходит на веб страницу | PageTransitionEvent |
paste | Событие происходит, когда пользователь вставляет некоторый контент в элемент | ClipboardEvent |
pause | Событие происходит, когда воспроизведение мультимедиа приостановлено пользователем или программно | Event |
play | Событие возникает, когда носитель был запущен или больше не приостановлен | Event |
playing | Событие происходит, когда медиа воспроизводится после приостановки или остановки для буферизации | Event |
popstate | Событие происходит при изменении истории окна | PopStateEvent |
progress | Событие происходит, когда браузер находится в процессе получения медиа данные (загрузка медиа) | Event |
ratechange | Событие происходит при изменении скорости воспроизведения мультимедиа | Event |
resize | Событие происходит при изменении размера представления документа | UiEvent, Event |
reset | Событие происходит при сбросе формы | Event |
scroll | Событие возникает при прокрутке полосы прокрутки элемента | UiEvent, Event |
search | Событие возникает, когда пользователь что-то вводит в поле поиска (для <input="search">) | Event |
seeked | Событие происходит, когда пользователь завершает перемещение/переход к новой позициив СМИ | Event |
seeking | Событие возникает, когда пользователь начинает перемещаться/пропускать новую позицию в СМИ | Event |
select | Событие происходит после того, как пользователь выбрал некоторый текст (для <input> and <textarea>) | UiEvent, Event |
show | Событие происходит, когда <menu> элемент отображается как контекстное меню | Event |
stalled | Событие возникает, когда браузер пытается получить данные мультимедиа, но данные недоступны | Event |
storage | Событие происходит при обновлении области веб хранилища | StorageEvent |
submit | Событие происходит при отправке формы | Event |
suspend | Событие происходит, когда браузер намеренно не получает медиаданные | Event |
timeupdate | Событие происходит, когда позиция воспроизведения изменилась (например, когда пользователь перемотка вперед к другому месту в медиа) | Event |
toggle | Событие возникает, когда пользователь открывает или закрывает элемент <details> | Event |
touchcancel | Событие происходит, когда касание прерывается | TouchEvent |
touchend | Событие происходит, когда палец убирается с сенсорного экрана | TouchEvent |
touchmove | Событие возникает при перетаскивании пальца по экрану | TouchEvent |
touchstart | Событие происходит, когда палец помещается на сенсорный экран | TouchEvent |
transitionend | Событие происходит, когда переход CSS завершен | TransitionEvent |
unload | Событие происходит после выгрузки страницы (для <body>) | UiEvent, Event |
volumechange | Событие возникает при изменении громкости носителя (включая настройкугромкость, чтобы "отключить звук") | Event |
waiting | Событие происходит, когда воспроизведение мультимедиа приостановлено, но ожидается, что оно возобновится (например, когда медиа останавливается для буферизации дополнительных данных) | Event |
wheel | Событие происходит, когда колесико мыши наезжает вверх или вниз над элементом | WheelEvent |
Свойства и методы событий HTML DOM
Свойство/Метод | Описание | Принадлежит | |
---|---|---|---|
altKey | Возвращает, указывает клавиша "ALT", была ли нажата при срабатывании события мыши | MouseEvent | |
altKey | Возвращает, указывает "ALT", была ли нажата клавиша при срабатывании ключевого события | KeyboardEvent, TouchEvent | |
animationName | Возвращает имя анимации | AnimationEvent | |
bubbles | Возвращает, является ли конкретное событие восходящим или нет | Event | |
button | Возвращает, какая кнопка мыши была нажата при срабатывании события мыши | MouseEvent | |
buttons | Возвращает, какие кнопки мыши были нажаты при срабатывании события мыши | MouseEvent | |
cancelable | Возвращает, можно ли для события предотвратить действие по умолчанию | Event | |
charCode | Возвращает код символа Юникода клавиши, вызвавшей событие onkeypress | KeyboardEvent | |
changeTouches | Возвращает список всех сенсорных объектов, состояние которых изменилось между предыдущее касание и это касание | TouchEvent | |
clientX | Возвращает горизонтальную координату указателя мыши относительно текущего окна, когда было инициировано событие мыши | MouseEvent, TouchEvent | |
clientY | Возвращает вертикальную координату указателя мыши относительно текущего окна, когда было инициировано событие мыши | MouseEvent, TouchEvent | |
clipboardData | Возвращает объект, содержащий данные, на которые влияет буфер обмена операция | ClipboardData | |
code | Возвращает код ключа, вызвавшего событие | KeyboardEvent | |
composed | Возвращает, составлено ли событие или нет | Event | |
createEvent() | Создает новое событие | Event | |
ctrlKey | Возвращает, указывает "CTRL" клавиша была ли нажата при срабатывании события мыши | MouseEvent | |
ctrlKey | Возвращает, указывает "CTRL" была ли нажата клавиша при срабатывании ключевого события | KeyboardEvent, TouchEvent | |
currentTarget | Возвращает элемент, прослушиватели событий которого инициировали событие | Event | |
data | Возвращает вставленные символы | InputEvent | |
dataTransfer | Возвращает объект, содержащий перетаскиваемые/отбрасываемые данные, или вставлено/удалено | DragEvent, InputEvent | |
defaultPrevented | Возвращает, был ли вызван метод preventDefault() для события | Event | |
deltaX | Возвращает величину горизонтальной прокрутки колеса мыши (ось x) | WheelEvent | |
deltaY | Возвращает величину вертикальной прокрутки колеса мыши (ось y) | WheelEvent | |
deltaZ | Возвращает величину прокрутки колеса мыши для оси z | WheelEvent | |
deltaMode | Возвращает число, представляющее единицу измерения для значений дельты (пиксели, строки или страницы) | WheelEvent | |
detail | Возвращает число, указывающее, сколько раз была нажата мышь | UiEvent | |
elapsedTime | Возвращает количество секунд, в течение которых была запущена анимация | AnimationEvent | |
elapsedTime | Возвращает количество секунд, в течение которых выполняется переход | ||
eventPhase | Возвращает, какая фаза потока событий сейчас оценивается | Event | |
getTargetRanges() | Возвращает массив, содержащий целевые диапазоны, на которые будет влиять вставка/удаление | InputEvent | |
getModifierState() | Возвращает массив, содержащий целевые диапазоны, на которые будет влиять вставка/удаление | MouseEvent | |
inputType | Возвращает тип изменения (например, "вставка" или "удаление") | InputEvent | |
isComposing | Возвращает, создается ли состояние события или нет | InputEvent, KeyboardEvent | |
isTrusted | Возвращает, является ли событие надежным | Event | |
key | Возвращает значение ключа для ключа, представленного событием | KeyboardEvent | |
key | Возвращает ключ измененного элемента хранилища | StorageEvent | |
keyCode | Возвращает код символа Unicode для клавиши, вызвавшей событие onkeypress, или код клавиши Unicode для клавиши, вызвавшей нажатие клавиши или событие onkeyup | KeyboardEvent | |
location | Возвращает расположение клавиши на клавиатуре или устройстве | KeyboardEvent | |
lengthComputable | Возвращает, можно ли вычислить длину прогресса | ProgressEvent | |
loaded | Возвращает объем загруженной работы | ProgressEvent | |
metaKey | Возвращает, указывает "META" была ли нажата клавиша при срабатывании события | MouseEvent | |
metaKey | Возвращает, указывает "meta" была ли нажата клавиша при срабатывании ключевого события | KeyboardEvent, TouchEvent | |
MovementX | Возвращает горизонтальную координату указателя мыши относительно позиция последнего события перемещения мыши | MouseEvent | |
MovementY | Возвращает вертикальную координату указателя мыши относительно позиция последнего события перемещения мыши | MouseEvent | |
newValue | Возвращает новое значение измененного элемента хранения | StorageEvent | |
newURL | Возвращает URL документа после изменения хэша | HasChangeEvent | |
offsetX | Возвращает горизонтальную координату указателя мыши относительно положение края целевого элемента | MouseEvent | |
offsetY | Возвращает вертикальную координату указателя мыши относительно положение края целевого элемента | MouseEvent | |
oldValue | Возвращает старое значение измененного элемента хранилища | StorageEvent | |
oldURL | Возвращает URL документа до изменения хэша | HasChangeEvent | |
onemptied | Событие возникает, когда происходит что-то плохое и медиафайл неожиданно недоступен (например, неожиданно отключается) | ||
pageX | Возвращает горизонтальную координату указателя мыши относительно документа при срабатывании события мыши | MouseEvent | |
pageY | Возвращает вертикальную координату указателя мыши относительно документа, когда было инициировано событие мыши | MouseEvent | |
persisted | Возвращает, была ли веб страница кэширована браузером | PageTransitionEvent | |
preventDefault() | Отменяет событие, если оно может быть отменено, что означает, что действие по умолчанию, относящееся к событию, не произойдет | Event | |
propertyName | Возвращает имя свойства CSS, связанного с анимацией или переходом | AnimationEvent, TransitionEvent | |
pseudoElement | Возвращает имя псевдоэлемента анимации или перехода | AnimationEvent, TransitionEvent | |
region | MouseEvent | ||
relatedTarget | Возвращает элемент, связанный с элементом, вызвавшим событие мыши | MouseEvent | |
relatedTarget | Возвращает элемент, связанный с элементом, вызвавшим событие | FocusEvent | |
repeat | Возвращает, удерживается ли клавиша повторно или нет | KeyboardEvent | |
screenX | Возвращает горизонтальную координату указателя мыши относительно экрана при возникновении события | MouseEvent | |
screenY | Возвращает вертикальную координату указателя мыши относительно экрана, когда событие было инициировано | MouseEvent | |
shiftKey | Возвращает, указывает "SHIFT" была ли нажата клавиша при возникновении события | MouseEvent | |
shiftKey | Возвращает, указывает "SHIFT" была ли нажата клавиша при срабатывании ключевого события Returns whether the "SHIFT" key was pressed when the key event was triggered | KeyboardEvent, TouchEvent | |
state | Возвращает объект, содержащий копию записей истории | PopStateEvent | |
stopImmediatePropagation() | Предотвращает вызов других слушателей того же события | Event | |
stopPropagation() | Предотвращает дальнейшее распространение события во время потока событий | Event | |
storageArea | Возвращает объект, представляющий затронутый объект хранилища | StorageEvent | |
target | Возвращает элемент, вызвавший событие | Event | |
targetTouches | Возвращает список всех сенсорных объектов, которые контактируют с поверхность и где событие touchstart произошло на том же целевом элементе, что и текущий целевой элемент | TouchEvent | |
timeStamp | Возвращает время (в миллисекундах относительно эпохи), в которое было создано событие | Event | |
total | Возвращает общий объем работы, которая будет загружена | ProgressEvent | |
touches | Возвращает список всех сенсорных объектов, которые в данный момент находятся в контакте с поверхность | TouchEvent | |
transitionend | Событие происходит, когда CSS переход завершен | TransitionEvent | |
type | Возвращает имя события | Event | |
url | Возвращает URL документа измененного элемента | StorageEvent | |
which | Возвращает, какая кнопка мыши была нажата при срабатывании события мыши | MouseEvent | |
which | Возвращает код символа Unicode ключа, вызвавшего событие onkeypress, или код ключа Unicode ключа, вызвавшего событие onkeydown или onkeyup | KeyboardEvent | |
view | Возвращает ссылку на объект Window, в котором произошло событие | UiEvent |