Глобальные атрибуты событий
Событие возникает, когда браузер реагирует на определённое действие пользователя. Пользователь генерирует событие при нажатии кнопки мыши, воспроизведении видео, загрузке документа или изображения или выполнении других действий на веб-странице.
Для реакции на событие ему назначается обработчик. Обработчик — это способ запуска скрипта (например, JavaScript) при действиях пользователя. Существует множество способов привязки обработчика, и один из них — установка его в HTML с помощью атрибутов.
Ниже приведена таблица атрибутов событий, используемых для запуска определённых действий.
html
<button onclick="alert('Clicked!')">Click me</button>Атрибуты событий окна
События окна вызываются для объекта window. Это глобальные атрибуты, которые можно использовать на любом элементе, хотя чаще всего они применяются к тегу <body>.
| Attribute | Description |
|---|---|
| onafterprint | Выполняется после печати документа. Новый атрибут в HTML5. |
| onbeforeprint | Выполняется перед печатью документа. Новый атрибут в HTML5. |
| onbeforeunload | Выполняется, когда документ собирается выгрузиться (когда пользователь собирается покинуть страницу до её полной загрузки). Новый атрибут в HTML5. |
| onblur | Выполняется, когда окно теряет фокус. |
| onerror | Выполняется при возникновении ошибки при загрузке документа. Новый атрибут в HTML5. |
| onhashchange | Выполняется при изменении якоря в URL веб-страницы (якорь идёт после #). Новый атрибут в HTML5. |
| onload | Выполняется, когда содержимое веб-страницы (изображения, CSS стили и скрипты) полностью загружено. |
| onmessage | Выполняется при получении сообщения. Новый атрибут в HTML5. |
| onoffline | Выполняется, когда браузер работает в автономном режиме. Новый атрибут в HTML5. |
| ononline | Выполняется, когда браузер работает в онлайн-режиме. Новый атрибут в HTML5. |
| onpagehide | Выполняется, когда пользователь уходит с веб-страницы. Новый атрибут в HTML5. |
| onpageshow | Выполняется, когда пользователь переходит на веб-страницу. Новый атрибут в HTML5. |
| onpopstate | Выполняется при изменении истории окна. Новый атрибут в HTML5. |
| onredo | Выполняется при использовании опции «Повторить» (последнее действие отменяется). Новый атрибут в HTML5. |
| onresize | Выполняется при изменении размера окна. Новый атрибут в HTML5. |
| onstorage | Выполняется при обновлении веб-хранилища. Новый атрибут в HTML5. |
| onundo | Выполняется при отмене последнего действия (команда «Отменить»). Новый атрибут в HTML5. |
| onunload | Выполняется, когда веб-страница выгружается (закрывается). Новый атрибут в HTML5. |
Атрибуты событий форм
Событие, которое может произойти внутри формы, называется событием формы. События форм возникают, когда пользователь открывает или закрывает форму, переключается между формами или работает с данными в форме.
Атрибуты событий форм могут применяться ко всем элементам HTML, но обычно используются с элементами форм HTML.
| Attribute | Description |
|---|---|
| onblur | Выполняется, когда элемент формы теряет фокус. |
| onchange | Выполняется при изменении значения элемента. |
| oncontextmenu | Выполняется при отображении контекстного меню. Новый атрибут в HTML5. |
| onfocus | Выполняется, когда элемент получает фокус. |
| oninput | Выполняется, когда элемент получает ввод пользователя. Новый атрибут в HTML5. |
| oninvalid | Выполняется, если элемент ввода невалиден. Новый атрибут в HTML5. |
| onreset | Выполняется при сбросе формы (все элементы управления в форме возвращаются к начальным значениям). Новый атрибут в HTML5. |
| onsearch | Выполняется, когда пользователь вводит текст в поле поиска (для <input type="search">). |
| onselect | Выполняется, когда в элементе выделяется текст. |
| onsubmit | Выполняется при отправке формы. |
Атрибуты событий клавиатуры
Атрибуты событий клавиатуры могут применяться ко всем элементам HTML.
| Attribute | Description |
|---|---|
| onkeydown | Выполняется, когда пользователь нажимает любую клавишу на клавиатуре. |
| onkeypress | Выполняется при нажатии клавиши. (Устаревший/Неподдерживаемый. Не работает с Alt, Ctrl, Shift, Esc, PrScr и т.д.) |
| onkeyup | Выполняется при отпускании нажатой клавиши. |
Атрибуты событий мыши
События мыши возникают при взаимодействии мыши с HTML-документом. Атрибуты могут применяться ко всем элементам HTML.
| Attribute | Description |
|---|---|
| onclick | Выполняется при нажатии кнопки мыши. |
| ondblclick | Выполняется при двойном нажатии кнопки мыши. |
| ondrag | Выполняется, когда элемент перетаскивается. Новый атрибут в HTML5. |
| ondragend | Выполняется, когда перетаскивание элемента завершено. Новый атрибут в HTML5. |
| ondragenter | Выполняется, когда перетаскиваемый элемент входит в допустимую область сброса. Новый атрибут в HTML5. |
| ondragleave | Выполняется, когда перетаскиваемый элемент покидает допустимую область сброса. Новый атрибут в HTML5. |
| ondragover | Выполняется, когда перетаскиваемый элемент находится над допустимой областью сброса (каждые несколько сотен миллисекунд). Новый атрибут в HTML5. |
| ondragstart | Выполняется, когда пользователь начинает перетаскивать элемент. Новый атрибут в HTML5. |
| ondrop | Выполняется, когда пользователь сбрасывает перетаскиваемый элемент. Новый атрибут в HTML5. |
| onmousedown | Выполняется при нажатии кнопки мыши. |
| onmousemove | Выполняется, когда курсор мыши перемещается на элемент. |
| onmouseout | Выполняется, когда курсор мыши покидает элемент. |
| onmouseover | Выполняется, когда курсор мыши наводится на элемент. |
| onmouseup | Выполняется при отпускании кнопки мыши. |
| onmousewheel | Выполняется, когда колесико мыши прокручивается вверх или вниз над элементом. Устаревший атрибут (вместо него используйте атрибут onwheel). |
| onscroll | Выполняется, когда происходит прокрутка полосы прокрутки элемента. Новый атрибут в HTML5. |
| onwheel | Выполняется, когда колесико мыши прокручивается вверх или вниз над элементом. Новый атрибут в HTML5. |
Атрибуты событий буфера обмена
| Attribute | Description |
|---|---|
| oncopy | Выполняется при копировании содержимого элемента. |
| oncut | Выполняется при вырезании содержимого элемента. |
| onpaste | Выполняется при вставке содержимого элемента. |
Атрибуты событий медиа
События медиа возникают в медиаэлементах, таких как видео, изображения и аудио. Атрибуты могут применяться к любому элементу HTML, но обычно используются внутри элементов audio, embed, img, object и video.
| Attribute | Description |
|---|---|
| onabort | Выполняется, когда загрузка аудио/видео прервана. Новый атрибут в HTML5. |
| oncanplay | Выполняется, когда файл готов к воспроизведению (достаточно буферизовано для начала воспроизведения). Новый атрибут в HTML5. |
| oncanplaythrough | Выполняется, когда файл готов к воспроизведению от начала до конца без остановок на буферизацию. Новый атрибут в HTML5. |
| oncuechange | Выполняется при изменении длительности медиа. Новый атрибут в HTML5. |
| onemptied | Выполняется, когда происходит что-то, и файл недоступен (например, при потере интернет-соединения). Новый атрибут в HTML5. |
| onended | Выполняется, когда медиафайл достиг конца. Новый атрибут в HTML5. |
| onerror | Выполняется при возникновении ошибки при загрузке файла. Новый атрибут в HTML5. |
| onloadeddata | Выполняется при загрузке медиаданных. Новый атрибут в HTML5. |
| onloadedmetadata | Выполняется при загрузке метаданных (размер медиафайлов, длительность и т. д.). Новый атрибут в HTML5. |
| onloadstart | Выполняется, когда браузер начинает загрузку медиаданных. Новый атрибут в HTML5. |
| onpause | Выполняется, когда медиафайл приостановлен. Новый атрибут в HTML5. |
| onplay | Выполняется, когда файл готов к воспроизведению. Новый атрибут в HTML5. |
| onplaying | Выполняется, когда файл начинает воспроизводиться. Новый атрибут в HTML5. |
| onprogress | Выполняется, когда браузер получает медиаданные. Новый атрибут в HTML5. |
| onratechange | Выполняется каждый раз при изменении режима воспроизведения (например, пользователь переключает режим ускоренного воспроизведения или замедления). Новый атрибут в HTML5. |
| onseeked | Выполняется, когда поиск по таймкоду завершён. Новый атрибут в HTML5. |
| onseeking | Выполняется, когда атрибут seeking тегов <audio> или <video> установлен в true, указывая на активный поиск. Новый атрибут в HTML5. |
| onstalled | Выполняется, когда браузер не может получить медиаданные по любой причине. Новый атрибут в HTML5. |
| onsuspend | Выполняется, когда браузер уже начал извлекать медиаданные, но процесс был приостановлен до полной загрузки данных. Новый атрибут в HTML5. |
| ontimeupdate | Выполняется при изменении позиции воспроизведения. Новый атрибут в HTML5. |
| onvolumechange | Выполняется каждый раз при изменении громкости (включая установку громкости на «без звука»). Новый атрибут в HTML5. |
| onwaiting | Выполняется, когда медиафайл приостановлен, но вот-вот возобновит воспроизведение (например, когда файл приостановлен для буферизации). Новый атрибут в HTML5. |
Другие события
| Attribute | Description |
|---|---|
| onerror | Выполняется при возникновении ошибки при загрузке внешнего файла. |
| onshow | Выполняется, когда <menu> отображается как контекстное меню. Новый атрибут в HTML5. |
| ontoggle | Выполняется, когда пользователь открывает или закрывает <details>. Новый атрибут в HTML5. |
Практика
Что такое глобальные атрибуты событий в HTML?