Атрибуты событий в HTML
223
посл. ред.
21.06.2016
Для взаимодействия пользователя со страницей в HTML введены атрибуты событий. В такие атрибуты записывается код JavaScript, который должен выполниться при наступлении определённого условия (события).
Событие
- это действие пользователя или самого браузера. К ним относятся движение мыши, нажатия на кнопки мыши и клавиатуры, загрузка страницы или отдельного элемента, фокусировка на элементе и т.д. Для каждого элемента страницы могут использоваться сразу несколько атрибутов событий.
Имя атрибута начинается с
, а далее идёт название самого события (его тип). Например, для события on
click
имя атрибута будет onclick
.
Ниже в таблицах представлены все события, которые могут возникать в документе.
Общие события
Атрибут | Событие наступает ... |
---|---|
onblur |
При потере фокуса элементом (то есть элемент перестал быть активным). Например, фокус теряется, если активным стал другой элемент. |
oncontextmenu |
При раскрытии контекстного меню. Обычно, контекстное меню вызывается нажатием правой кнопки мыши на элементе. |
onerror |
При возникновении ошибки в момент загрузки элемента. |
onfocus |
При фокусировке на элементе (то есть элемент становится активным). Элемент можно следать активным нажатием левой кнопки мыши или с помощью клавиши Tab. |
onload |
После полной загрузки элемента или всего документа. |
onresize |
При изменении размеров элемента. |
onscroll |
Во время прокручивания содержимого элемента. |
События формы
Атрибут | Событие наступает ... |
---|---|
onchange |
После изменения значения в поле формы. Для текстового поля событие сработает только после потери фокуса. |
oninput |
При изменении значения в поле формы. Например, будет срабатывать после каждого введённого символа в текстовом поле. |
oninvalid |
Если введено некорректное значение в поле формы. |
onreset |
Перед сбросом значений формы по умолчанию. |
onselect |
После выделения отдельной части или всего текста внутри поля формы. |
onsubmit |
Перед отправкой формы на сервер. |
События мыши
Атрибут | Событие наступает ... |
---|---|
onclick |
При клике левой клавишей мыши по данному элементу. |
ondblclick |
При двойном клике левой клавишей мыши по данному элементу. |
onmousedown |
При нажатии левой клавиши мыши вниз над элементом. |
onmouseup |
После отпускания нажатой левой клавиши мыши над элементом. |
onmouseenter |
При наведении курсора мыши на элемент. Сработает, если курсор мыши был вне элемента и попал на его область. |
onmouseover |
При наведении курсора мыши на элемент. Сработает, если курсор мыши был вне элемента и попал на его область. |
onmouseleave |
При покидании курсора мыши области элемента. |
onmouseout |
При покидании курсора мыши области элемента. |
onmousemove |
При движении курсора мыши над областью элемента. |
onmousewheel |
При прокручивании колёсика мыши пользователем. |
События клавиатуры
Атрибут | Событие наступает ... |
---|---|
onkeypress |
При нажатии на любую клавишу (то есть нажать и отпустить клавишу). Элемент должен быть активным. |
onkeydown |
При нажатии любой клавиши вниз. Элемент должен быть активным. |
onkeyup |
После отпускания любой клавиши. Элемент должен быть активным. Иногда используется для динамической проверки вводимого в форму текста, хотя правильнее использовать атрибут oninput . |
События окна (только для тега <body>
)
Атрибут | Событие наступает ... |
---|---|
onafterprint |
После отправки документа на печать. Используется, например, если перед печатью документ был изменён с помощью атрибута onbeforeprint . |
onbeforeprint |
Перед отправкой документа на печать. Например, используется для редактирования документа перед печатью. |
onbeforeunload |
При попытке покинуть страницу (до начала выгрузки страницы). Может использоваться для предупреждения пользователя о том, что он покидает страницу. |
onhashchange |
После изменения анкора в адресе документа (указывается за #). |
onmessage |
При получении окном сообщения. |
onoffline |
При переходе в автономный режим (при отключении от интернета). Может использоваться для предупреждения пользователя о том, что связь с интернетом потеряна, или для отключения некоторых функций. Включение этих функций должно производиться с помощью атрибута ononline . |
ononline |
При подключении к интернету. Может использоваться для оповещения пользователя о том, что связь с интернетом восстановлена, или для включения функций, которые были отключены с помощью атрибута onoffline . |
onpagehide |
При переходе с текущей страницы на другую с помощью кнопок Вперёдили Назад. |
onpageshow |
При переходе на данную страницу с помощью кнопок Вперёдили Назад. |
onpopstate |
При переходе на данную страницу из истории браузера. |
onstorage |
При изменении содержимого веб-хранилища. |
onunload |
Во время выгрузки страницы. |
События медиаэлементов
Атрибут | Событие наступает ... |
---|---|
onloadstart |
В момент, когда браузер начинает поиск ресурса (до начала загрузки). |
onprogress |
В момент получения браузером медиаданных (в процессе загрузки). |
onsuspend |
Когда браузер преднамеренно приостанавливает получение данных. |
onabort |
Когда загрузка данных прерывается по какой-либо причине, но не из-за ошибки. |
onemptied |
Когда данные становятся недоступными (например из-за разрыва соединения). |
onstalled |
Когда данные перестают загружаться, хотя браузер пытается их получить. |
onloadedmetadata |
После получения метаданных медиаэлемента (размер, продолжительность и т.д.). |
onloadeddata |
При получении данных медиаэлемента. |
oncanplay |
Когда браузер уже может начать воспроизведение файла, но считает, что буферизации ещё недостаточно для непрерывного воспроизведения (то есть может потребоваться дополнительная остановка и буферизация). |
oncanplaythrough |
Когда браузер считает, что выполненной буферизации достаточно для непрерывного воспроизведения файла (то есть не потребуется дополнительная буферизация). |
onplaying |
При возобновлении воспроизведения после того, как было приостановлено или отложено из-за отсутствия медиаданных. |
onwaiting |
При остановке воспроизведения из-за временного отсутствия медиаданных (например для выполнения достаточной буферизации). |
onseeking |
Когда браузер стремится перейти к новой позиции воспроизведения. |
onseeked |
Когда браузер перешёл к новой позиции воспроизведения. |
onended |
Когда достугнут конец медиаресурса и воспроизведение остановилось. |
ondurationchange |
При изменении продолжительности медиаресурса. |
ontimeupdate |
При изменении положения указателя позиции воспроизведения. |
onplay |
При возобновлении воспроизведения медиаданных. |
onpause |
Когда воспроизведение приостановлено пользователем (нажата Пауза) или браузером. |
onratechange |
При изменении режима воспроизведения (медленнее или быстрее). |
onvolumechange |
При изменении громкости воспроизведения (включая режим mute). |