Глобальные атрибуты событий HTML

Событие происходит, когда браузер реагирует на определённое действие — щелчок мышью, нажатие клавиши, воспроизведение видео, отправку формы, изменение размера окна и т. д. Чтобы отреагировать на событие, к нему прикрепляют обработчик: фрагмент скрипта (обычно JavaScript), который выполняется при возникновении события.

HTML позволяет прикрепить обработчик прямо в разметке с помощью атрибута события. Каждый атрибут на этой странице начинается с on, за которым следует имя события (onclick, onkeydown, onsubmit, …). Все они появились в HTML5 и принимают JavaScript-код в качестве значения:

<button onclick="alert('Clicked!')">Click me</button>

Эти атрибуты событий являются глобальными — большинство из них можно размещать на любом элементе, — однако каждый из них имеет смысл лишь в подходящем контексте (атрибуты форм — на элементах управления формой, медиаатрибуты — на <audio>/<video> и т. д.).

Внимание

Встроенные атрибуты on* не рекомендуются в современном коде. Они смешивают поведение с разметкой, не позволяют легко подключить более одного обработчика и блокируются строгой Content Security Policy. Предпочтительнее использовать addEventListener в отдельном скрипте — это разделяет HTML и JavaScript и позволяет нескольким обработчикам слушать одно и то же событие:

<button id="myBtn">Click me</button>

<script>
  const btn = document.getElementById("myBtn");
  btn.addEventListener("click", () => {
    alert("Clicked!");
  });
</script>

В таблицах ниже атрибуты событий сгруппированы по категориям. Подробнее о том, как работают события в браузере, читайте в разделах JavaScript Events и HTML Global Attributes.

Атрибуты событий окна

События окна срабатывают для объекта window. Обычно они размещаются на теге <body>, где браузер сопоставляет их с window.

Атрибут	Описание
onafterprint	Срабатывает после печати документа.
onbeforeprint	Срабатывает перед печатью документа.
onbeforeunload	Срабатывает перед выгрузкой документа (например, когда пользователь собирается покинуть страницу).
onblur	Срабатывает, когда окно теряет фокус (пользователь переключается на другую вкладку или приложение).
onerror	Срабатывает при ошибке загрузки документа или ресурса.
onhashchange	Срабатывает при изменении фрагмента (части URL после `#`).
onload	Срабатывает, когда вся страница — изображения, CSS и скрипты — полностью загружена.
onmessage	Срабатывает, когда окно получает сообщение (например, от `postMessage`).
onoffline	Срабатывает, когда браузер теряет подключение к сети.
ononline	Срабатывает, когда браузер восстанавливает подключение к сети.
onpagehide	Срабатывает, когда пользователь уходит со страницы.
onpageshow	Срабатывает, когда пользователь переходит на страницу.
onpopstate	Срабатывает при изменении активной записи в истории.
onresize	Срабатывает при изменении размера окна.
onstorage	Срабатывает при обновлении области веб-хранилища (`localStorage`/`sessionStorage`).
onunload	Срабатывает при выгрузке страницы (удалении документа).

<body onload="document.body.style.background = '#eef'">
  <p>This page changes its background colour once it has loaded.</p>
</body>

Атрибуты событий форм

Событие, возникающее внутри формы, называется событием формы. Такие события происходят, когда пользователь открывает или закрывает форму, перемещается между формами или работает с данными в форме.

Атрибуты событий формы можно применять ко всем HTML-элементам, однако чаще всего они используются с элементами управления формой: <input>, <select> и <textarea>.

Атрибут	Описание
onblur	Срабатывает, когда элемент теряет фокус (пользователь переходит к другому элементу управления).
onchange	Срабатывает, когда значение элемента управления изменилось и элемент потерял фокус.
oncontextmenu	Срабатывает при открытии контекстного меню (правая кнопка мыши) на элементе.
onfocus	Срабатывает, когда элемент получает фокус.
oninput	Срабатывает немедленно при каждом изменении значения элемента управления.
oninvalid	Срабатывает, когда отправляемый элемент управления не проходит проверку ограничений.
onreset	Срабатывает при сбросе формы к исходным значениям.
onsearch	Срабатывает при поиске пользователем в поле `<input type="search">`.
onselect	Срабатывает при выделении пользователем текста в `<input>` или `<textarea>`.
onsubmit	Срабатывает при отправке формы.

<form onsubmit="alert('Submitting…'); return false;">
  <input type="text" name="name"
         onfocus="this.style.background = '#ffd'"
         onblur="this.style.background = ''"
         placeholder="Your name">
  <button type="submit">Send</button>
</form>

Возврат false из onsubmit (или вызов event.preventDefault() в JavaScript) предотвращает фактическую отправку формы — удобно при тестировании.

Атрибуты событий клавиатуры

Атрибуты событий клавиатуры можно применять ко всем HTML-элементам.

Атрибут	Описание
onkeydown	Срабатывает при нажатии клавиши. Повторяется, пока клавиша удерживается.
onkeypress	Срабатывает при нажатии символьной клавиши. Устарел — используйте `onkeydown`.
onkeyup	Срабатывает при отпускании нажатой клавиши.

<input type="text"
       onkeyup="document.getElementById('echo').textContent = this.value"
       placeholder="Type here">
<p>You typed: <span id="echo"></span></p>

Атрибуты событий мыши

События мыши возникают при взаимодействии мыши с HTML-документом. Атрибуты можно применять ко всем HTML-элементам.

Атрибут	Описание
onclick	Срабатывает при щелчке по элементу.
ondblclick	Срабатывает при двойном щелчке по элементу.
ondrag	Срабатывает многократно во время перетаскивания элемента.
ondragend	Срабатывает при завершении операции перетаскивания.
ondragenter	Срабатывает, когда перетаскиваемый элемент попадает в допустимую зону сброса.
ondragleave	Срабатывает, когда перетаскиваемый элемент покидает допустимую зону сброса.
ondragover	Срабатывает многократно, пока перетаскиваемый элемент находится над допустимой зоной сброса.
ondragstart	Срабатывает, когда пользователь начинает перетаскивать элемент.
ondrop	Срабатывает при сбросе перетаскиваемого элемента в допустимую зону сброса.
onmousedown	Срабатывает при нажатии кнопки мыши над элементом.
onmousemove	Срабатывает при каждом движении указателя над элементом.
onmouseout	Срабатывает, когда указатель покидает элемент.
onmouseover	Срабатывает, когда указатель перемещается на элемент.
onmouseup	Срабатывает при отпускании кнопки мыши над элементом.
onmousewheel	Устарел — используйте `onwheel`.
onscroll	Срабатывает при прокрутке полосы прокрутки элемента.
onwheel	Срабатывает при прокрутке колёсика мыши над элементом.

<div onmousemove="this.textContent = event.offsetX + ', ' + event.offsetY"
     style="width:240px; height:120px; background:#eef; text-align:center; line-height:120px;">
  Move the mouse here
</div>

Атрибуты событий буфера обмена

Атрибут	Описание
oncopy	Срабатывает при копировании содержимого элемента.
oncut	Срабатывает при вырезании содержимого элемента.
onpaste	Срабатывает при вставке содержимого в элемент.

Атрибуты медиасобытий

Медиасобытия возникают в медиаэлементах — видео, изображениях и аудио. Атрибуты можно применять к любому HTML-элементу, однако обычно они используются с элементами audio, embed, img, object и video.

Атрибут	Описание
onabort	Срабатывает при прерывании загрузки медиа.
oncanplay	Срабатывает, когда браузер буферизовал достаточно данных для начала воспроизведения.
oncanplaythrough	Срабатывает, когда браузер предполагает возможность воспроизведения без остановки на буферизацию.
oncuechange	Срабатывает при изменении активной реплики текстовой дорожки (например, субтитров).
ondurationchange	Срабатывает при изменении продолжительности медиа.
onemptied	Срабатывает, когда медиа становится пустым (например, при потере соединения).
onended	Срабатывает, когда воспроизведение достигает конца медиа.
onerror	Срабатывает при ошибке загрузки медиа.
onloadeddata	Срабатывает, когда загружен текущий кадр медиаданных.
onloadedmetadata	Срабатывает, когда загружены метаданные (продолжительность, размеры, …).
onloadstart	Срабатывает, когда браузер начинает загрузку медиа.
onpause	Срабатывает при приостановке воспроизведения.
onplay	Срабатывает при начале или возобновлении воспроизведения.
onplaying	Срабатывает, когда воспроизведение действительно запущено (например, после буферизации).
onprogress	Срабатывает периодически во время загрузки медиа браузером.
onratechange	Срабатывает при изменении скорости воспроизведения (например, перемотка).
onseeked	Срабатывает при завершении операции перемотки.
onseeking	Срабатывает при начале операции перемотки.
onstalled	Срабатывает, когда браузер пытается, но не может получить медиаданные.
onsuspend	Срабатывает при намеренной приостановке загрузки медиа.
ontimeupdate	Срабатывает при изменении позиции воспроизведения во время воспроизведения.
onvolumechange	Срабатывает при изменении громкости (включая отключение звука).
onwaiting	Срабатывает, когда воспроизведение останавливается из-за отсутствия следующего буферизованного кадра.

Прочие события

Атрибут	Описание
ontoggle	Срабатывает, когда пользователь открывает или закрывает элемент `<details>`.

Информация

Некоторые атрибуты, которые можно встретить в старых справочниках, — onredo, onundo и onshow — никогда не были частью стандарта HTML или не поддерживаются браузерами, поэтому они не включены в этот список.

Практика

Что такое глобальные атрибуты событий в HTML?

Атрибуты on*, доступные на большинстве HTML-элементов, которые выполняют JavaScript при возникновении соответствующего события.Атрибуты, отправляющие данные на сервер при возникновении события.Обработчики событий, работающие только с элементами формы.Замена addEventListener, которую браузеры больше не поддерживают.