Событиями называют реакцию браузера на определенные действия пользователя и внутреннего взаимодействия скриптов. Пользователь генерирует события, когда нажимает на кнопку мыши или клавиатуру, загружает документ, переводит фокус от одного элемента к другому и т.д.
Каждому событию назначается обработчик, написанная на языке сценариев (таких как JavaScript) функция, которая срабатывает, как только событие произошло. Одним из способов сделать это - назначить обработчик прямо в разметке, используя атрибуты событий.
Ниже приводим таблицу атрибутов событий, которые могут быть добавлены к HTML элементам для инициирования определенных действий.
Атрибуты событий окна
События объекта окна используются с тегом <body>.
| Атрибут | Описание |
|---|---|
| onafterprint | Запускается после вывода страницы на печать. Новый атрибут в HTML5. |
| onbeforeprint | Запускается перед печатью документа. Новый атрибут в HTML5. |
| onbeforeunload | Срабатывает до начала загрузки документа (при попытке покинуть страницу до ее загрузки). Новый атрибут в HTML5. |
| onblur | Запускается, когда окно теряет фокус. |
| onerror | Запускается, если при загрузке документа произошла ошибка.
Новый атрибут в HTML5. |
| onhashchange | Запускается при изменении анкора в адресе документа (указывается за #).
Новый атрибут в HTML5. |
| onload | Запускается, когда всё содержимое веб-страницы (изображения, внешние таблицы стилей и внешние скрипты) полностью загружено. |
| onmessage | Запускается при получении сообщения.
Новый атрибут в HTML5. |
| onoffline | Запускается, когда браузер переходит в режим онлайн.
Новый атрибут в HTML5. |
| ononline | Запускается, когда браузер переходит в режим онлайн.
Новый атрибут в HTML5. |
| onpagehide | Запускается, когда пользователь покидает страницу.
Новый атрибут в HTML5. |
| onpageshow | Запускается, когда пользователь переходит на страницу.
Новый атрибут в HTML5. |
| onpopstate | Запускается при изменении окна истории.
Новый атрибут в HTML5. |
| onredo | Запускается, когда документ выполняет восстановление последней операции.
Новый атрибут в HTML5. |
| onresize | Запускается, когда изменяется размер окна.
Новый атрибут в HTML5. |
| onstorage | Запускается при обновлении веб-хранилища данных.
Новый атрибут в HTML5. |
| onundo | Запускается при выполнении команды отменить в документе.
Новый атрибут в HTML5. |
| onunload | Запускается при выходе пользователя из документа.
Новый атрибут в HTML5. |
Атрибуты событий формы
К событиям формы относятся те события, которые возникают при выполнении действий с HTML формами.
Атрибуты событий формы могут быть применены ко всем HTML элементам, но обычно их используют в элементах формы.
| Атрибут | Описание |
|---|---|
| onblur | Запускается, когда элемент теряет фокус. |
| onchange | Запускается при изменении значения элемента. |
| oncontextmenu | Запускается при вызове контекстного меню на элементе.
Новый атрибут в HTML5. |
| onfocus | Запускается, когда элемент получает фокус. |
| oninput | Запускается, когда пользователь вводит данные в элемент.
Новый атрибут в HTML5. |
| oninvalid | Запускается, если введенное значение элемента не корректно, т.е. не удовлетворяет требованиям (например, не заполнено обязательное поле - атрибут required).
Новый атрибут в HTML5. |
| onreset |
Запускается при нажатии кнопки Reset (сброс значений) в форме.
Новый атрибут в HTML5. |
| onsearch | Запускается при нажатии клавиши "Enter" или кнопки "х" в элементе <input> (type="search"). |
| onselect | Запускается при выделении текста в элементе. |
| onsubmit | Запускается при отправке формы. |
Атрибуты событий клавиатуры
События, инициируемые клавиатурой, могут применяться ко всем элементам HTML.
| Атрибут | Описание |
|---|---|
| onkeydown | Запускается, когда пользователь нажимает на любую клавишу. |
| onkeypress | Запускается, после того, как пользователь нажал на клавишу (не работает с такими клавишами как Alt, Ctrl, Shift, Esc, PrScr и т.п.). |
| onkeyup | Запускается, после того, как нажатая клавиша была отпущена. |
Атрибуты событий мыши
Атрибуты событий, которые возникают при выполнении действий с мышью, могут применяться ко всем элементам HTML.
| Атрибут | Описание |
|---|---|
| onclick | Запускается при клике мышью. |
| ondblclick | Запускается при двойном клике мышью. |
| ondrag | Запускается при перетаскивании элемента.
Новый атрибут в HTML5. |
| ondragend | Запускается в конце операции перетаскивания. Новый атрибут в HTML5. |
| ondragenter | Запускается, когда перетаскиваемый элемент оказался в заданной области.
Новый атрибут в HTML5. |
| ondragleave | Запускается, когда перетаскиваемый элемент выходит из допустимой зоны для переноса.
Новый атрибут в HTML5. |
| ondragover |
Запускается, когда элемент перемещают над допустимой зоной для переноса.
Новый атрибут в HTML5. |
| ondragstart | Запускается в начале операции перетаскивания.
Новый атрибут в HTML5. |
| ondrop | Запускается после того, когда пользователь отпускает перетаскиваемый элемент.
Новый атрибут в HTML5. |
| onmousedown | Запускается при нажатии кнопки мыши. |
| onmousemove | Запускается при перемещении указателя мыши. |
| onmouseover | Запускается, когда указатель мыши перемещается над элементом. |
| onmouseup | Запускается, когда кнопка мыши отпущена. |
| onmousewheel | Запускается, когда прокручивается колесо мыши.
Устаревший атрибут (рекомендуется использовать атрибут onwheel). |
| onscroll | Запускается, во время прокручивания полосы прокрутки элемента.
Новый атрибут в HTML5. |
| onwheel | Запускается, при использовании колеса мыши на элементе.
Новый атрибут в HTML5. |
События буфера обмена
| Атрибут | Описание |
|---|---|
| oncopy | Запускается при копировании пользователем содержимого элемента. |
| oncut | Запускается, когда пользователь вырезает содержимое элемента. |
| onpaste | Запускается, когда пользователь вставляет содержимое в элемент. |
События медиа-файлов
События, которые возникают в медиа элементах (video, image, audio) могут быть применены к любому HTML элементу, однако наиболее часто они используются в медиа элементах, таких как audio, embed, img, object и video.
| Атрибут | Описание |
|---|---|
| onabort |
Запускается при отмене воспроизведения. Новый атрибут в HTML5. |
| oncanplay |
Запускается, когда файл готов к проигрыванию (достаточно загружен в буфер). Новый атрибут в HTML5. |
| oncanplaythrough | Запускается, когда файл может быть проигран от начала до конца без остановки для буферизации.
Новый атрибут в HTML5. |
| oncuechange | Запускается, когда продолжительность медиа изменяется.
Новый атрибут в HTML5. |
| onemptied | Запускается, когда произошла какая-то неполадка и файл стал недоступен (например, при отсутствии подключения к Интернету).
Новый атрибут в HTML5. |
| onended | Запускается, когда медиа файл воспроизведен до конца.
Новый атрибут в HTML5. |
| onerror |
Запускается, когда происходит ошибка при загрузке элемента.
Новый атрибут в HTML5. |
| onloadeddata | Запускается при загрузке данных медиа.
Новый атрибут в HTML5. |
| onloadedmetadata | Запускается, когда загружены мета-данные (например размер медиа файла, продолжительность и т.д.).
Новый атрибут в HTML5. |
| onloadstart |
Запускается, если воспроизведение файла приостановлено (нажали паузу) пользователем или программно.
Новый атрибут в HTML5. |
| onplay | Запускается при перемещении указателя мыши. Новый атрибут в HTML5. |
| onplaying |
Запускается при воспроизведении файла.
Новый атрибут в HTML5. |
| onprogress |
Запускается, когда браузер находится в процессе получения данных медиа файла.
Новый атрибут в HTML5. |
| onratechange | Запускается, когда атрибут поиска медиа элемента (object.seeking) у тегов audio или video имеет значение "false" (поиск завершен, и текущая позиция воспроизведения найдена). Новый атрибут в HTML5. |
| onseeking | Запускается, когда атрибут поиска медиа элемента (object.seeking) у тегов <audio> html5 или <video> html5 имеет значение "true" (поиск начат, текущая позиция воспроизведения перемещается).
Новый атрибут в HTML5. |
| onstalled | Запускается, когда браузер не может получить данные медиа файла по какой-либо причине. Новый атрибут в HTML5. |
| onsuspend | Запускается, когда браузер уже начал извлекать медиа данные, но процесс был приостановлен прежде, чем медиа файл был полностью извлечен.
Новый атрибут в HTML5. |
| ontimeupdate | Запускается, когда медиа изменяет позицию проигрывания. Новый атрибут в HTML5. |
| onvolumechange | Запускается при изменении уровня громкости медиа, включая режим "mute" (без звука).
Новый атрибут в HTML5. |
| onwaiting | Запускается, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных).
Новый атрибут в HTML5. |
Прочие события
| Атрибут | Описание |
|---|---|
| onerror | Запускается, когда происходит ошибка во время загрузки внешнего файла. |
| onshow |
Запускается, когда элемент <menu> отображается как контекстное меню.
Новый атрибут в HTML5. |
| ontoggle | Запускается, когда пользователь открывает или закрывает элемент <details>.
Новый атрибут в HTML5. |