Атрибуты событий в HTML

200

посл. ред. 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).