Полное руководство по атрибутам HTML-событий

Опубликовано: 27 Августа, 2022

События — это действия, которые происходят в браузере, когда пользователь что-то делает. Например, когда пользователь щелкает мышью или набирает что-то на клавиатуре.

Атрибуты событий: в HTML мы можем использовать действия событий в браузере, и с помощью события пользователь отвечает системе. Атрибуты событий можно использовать с элементами HTML для выполнения различных действий.

Список атрибутов событий: полный список атрибутов событий приведен ниже:

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

onafterprint : Атрибут onafterprint работает, когда страница начала печататься или если диалоговое окно печати было закрыто. Этот атрибут используется вместе с атрибутом onbeforeprint.
onbeforeprint : атрибут onbeforeprint работает, когда страница должна быть напечатана. Предупреждающее сообщение отображается перед появлением диалогового окна печати. Атрибут onbeforeprint используется с атрибутом onafterprint.
onbeforeunload : событие onbeforeunload запускается, когда документ вот-вот будет выгружен. Это событие используется, чтобы позволить отображать сообщение в диалоговом окне, чтобы информировать пользователя о том, что он/она хочет остаться или покинуть текущую страницу.
onerror : этот атрибут работает, когда возникает ошибка при загрузке внешнего файла. Внешний файл может содержать файл документа или файл изображения.
onhashchange : этот атрибут работает, когда в якорной части произошли изменения. Якорная часть начинается с символа «#» текущего URL-адреса.
onload : этот атрибут работает, когда объект загружен. Этот атрибут в основном используется в элементе <body> для выполнения скрипта. Его можно использовать и с другими элементами. Этот атрибут используется для проверки типа и версии браузера посетителя, а также для загрузки нужной версии веб-страницы на основе информации.
сообщение: Это событие используется, когда объект получил сообщение через источник события.
onoffline : атрибут события onoffline работает, когда браузер работает в автономном режиме. Поддерживается только тегом <body>. Это противоположность атрибуту онлайн -события.
ononline : Атрибут события ononline срабатывает, когда браузер начинает работать в онлайн-режиме. Он противоположен атрибуту события onoffline.
на страницескрыть: Это событие происходит, когда пользователь покидает веб-страницу. Например, закрыть окно браузера, перейти по ссылке, обновить страницу и т. д.
onpageshow : это событие происходит, когда пользователь переходит на веб-сайт. Это событие очень похоже на событие onload, но происходит после события onload. Это происходит каждый раз, когда страница загружается, тогда как событие onload не происходит, когда страница загружается из кеша.
onresize : атрибут события onresize запускается каждый раз при изменении размера окна браузера.
onunload : Атрибут события onunload работает, когда документ выгружается, т.е. это происходит, когда браузер закрыт. В основном он используется, когда пользователь открывает ссылку, отправляет форму и закрывает окно браузера.

2. Атрибуты события формы

onblur : этот атрибут срабатывает в тот момент, когда элемент теряет фокус. Этот атрибут в основном используется в коде проверки формы. Этот атрибут противоположен атрибуту onfocus .
по изменению: Атрибут события onchange срабатывает при изменении значения элемента и выборе нового значения из списка.
oncontextmenu : этот атрибут работает, когда пользователь щелкает правой кнопкой мыши элемент, чтобы открыть контекстное меню.
onfocus : этот атрибут onfocus работает, когда элемент находится в фокусе. Этот атрибут события чаще всего используется с элементами <input>, <select>, <a>. Этот атрибут события поддерживается всеми элементами HTML, кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и элементы <title>.
oninput : этот атрибут работает, когда он получает значение ввода пользователя. Этот атрибут в основном срабатывает, когда пользователь изменяет значение элементов <input> и <textarea>.
oninvalid : атрибут события oninvalid работает, когда значения поля ввода недействительны или пусты. Скрипт запускается, когда пользователь нажимает кнопку отправки. Обязательное поле ввода должно быть заполнено перед его отправкой.
при сбросе: Атрибут события onreset в HTML срабатывает при сбросе формы. Этот атрибут работает с тегом <form>.
onsearch : этот атрибут onsearch работает, когда пользователь нажимает кнопку ENTER или кнопку x . Это событие работает с элементом <input>.
onselect : Атрибут события onselect работает, когда в элементе выделен некоторый текст. Это часть атрибута события. Он поддерживается многими элементами HTML, такими как <input type = «file»>, <input type = «password»>, <input type = «text»> и <textarea>.
onsubmit : атрибут события onsubmit в HTML срабатывает при отправке формы.

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

onkeydown : этот атрибут события onkeydown срабатывает, когда пользователь нажимает любую клавишу на клавиатуре.
onkeyup : этот атрибут события onkeyup срабатывает, когда пользователь отпускает клавишу с клавиатуры.
onkeypress : этот атрибут срабатывает, когда пользователь нажимает клавишу на клавиатуре. Этот атрибут события нельзя использовать для всех клавиш (например, ALT, CTRL, SHIFT, ESC) во всех браузерах.

4. События мыши

onclick : атрибут события onclick срабатывает, когда пользователь нажимает кнопку. При щелчке мышью по элементу запускается скрипт.
onmouseout : атрибут onmouseout работает, когда указатель мыши перемещается за пределы указанного элемента.
ondblclick : это событие атрибута происходит, когда пользователь дважды щелкает мышью по элементу. Это часть атрибута события.
onmouseover : атрибут события onmouseover срабатывает, когда указатель мыши перемещается по указанному элементу.
onmousedown : этот атрибут onmousedown будет срабатывать, когда кнопка мыши нажата на элементе, и порядок событий связан с событием onmousedown (для левой кнопки мыши)
onmouseup : этот атрибут срабатывает, когда кнопка мыши отпускается над элементом. Порядок событий связан с событием onmouseup.
onmousemove : атрибут onmousemove работает, когда указатель перемещается по элементу.
onwheel : этот атрибут работает, когда колесо указателя перемещается вверх или вниз по элементу. Атрибут onwheel также работает, когда пользователь прокручивает или увеличивает элемент с помощью мыши или сенсорной панели.

5. Перетащите атрибуты события

ondrag : Атрибут события ondrag работает, когда элемент или выделение текста перетаскиваются в HTML. Это событие очень похоже на событие перетаскивания. Этот атрибут является новым в HTML 5.
ondragstart : используется, когда пользователь хочет перетащить текст или элемент. Это просто процесс, в котором мы нажимаем на нужный текст, чтобы перетащить а также бросить их в другое место.
ondragend : атрибут события ondragend срабатывает, когда пользователь заканчивает перетаскивание элемента. Функция перетаскивания широко распространена в HTML5. Любой элемент можно сделать перетаскиваемым с помощью атрибута перетаскивания HTML5.
ondrop : Атрибут события ondrop используется для перетаскивания элемента или текста в допустимое место или цель, которую можно перетаскивать. Перетаскивание является общей функцией HTML 5.
ondragenter : атрибут события ondragenter в HTML работает, когда содержимое можно перетаскивать. Элемент создается путем установки значения атрибута draggable равным true. Атрибут draggable может принимать только значение true или false.
onscroll : этот атрибут onscroll работает, когда полоса прокрутки элемента прокручивается. Чтобы создать полосу прокрутки в элементе, используйте свойство переполнения CSS.
ondragleave : Атрибут ondragleave работает, когда перетаскиваемый элемент или выделенный текст покидают допустимую цель перетаскивания. Это помогает перетаскивать элементы и входит или выходит из цели перетаскивания.
Ондраговер : Это событие происходит, когда перетаскиваемый элемент перетаскивается через допустимую зону перетаскивания.

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

oncopy : этот атрибут срабатывает, когда пользователь копирует содержимое, присутствующее в элементе. Атрибут oncopy используется с элементами <img>, <input>, <p> и т. д.
onpaste : атрибут onpaste работает, когда какое-то содержимое вставляется в элемент. Этот атрибут события поддерживается всеми элементами HTML. В основном используется с элементом <input>.
oncut : этот атрибут срабатывает, когда пользователь вырезает или удаляет содержимое, которое присутствовало в элементе. Это атрибут логического типа. Этот атрибут поддерживается всеми элементами HTML, но это возможно для элемента, для атрибута ContentEditable которого установлено значение «true».

7. Атрибуты медиа-события

onabort : Это происходит при прерывании загрузки аудио/видео, когда загрузка медиаданных прерывается без какой-либо ошибки.
oncanplay : это происходит, когда указанное аудио/видео достаточно буферизовано для начала.
oncanplaythrough: используется, когда медиафайл, т. е. аудио/видео, может воспроизводиться до конца без какой-либо буферизации.
onemptied: это происходит, когда событие пусто.
onended : Это происходит, когда аудио/видео завершается.
ondurationchange : происходит при изменении продолжительности аудио/видео.
onerror : срабатывает, когда происходит прерывание при загрузке внешнего файла.
onloadeddata : это происходит, когда данные текущего кадра загружены, но данных следующего кадра недостаточно для воспроизведения аудио/видео.
onloadedmetadata : это происходит, когда загружаются метаданные для указанного аудио/видео.
onloadstart : это происходит, когда начинается процесс загрузки указанного аудио/видео.
onpause : Это происходит, когда аудио/видео приостановлено. Аудио/видео может быть приостановлено либо пользователем, либо программно.
onplayevent : это происходит при воспроизведении аудио/видео. Аудио/видео может воспроизводиться пользователем или программно.
onplaying : это происходит, когда аудио/видео приостанавливается и воспроизводится после буфера.
onprogress : это происходит, когда браузер загружает указанное аудио/видео.
onratechange : происходит при изменении скорости воспроизведения аудио/видео. СвойствоplayRate используется для установки или возврата текущей скорости воспроизведения аудио/видео.

8. Различные атрибуты событий

onggle : событие onggle запускается, когда пользователь открывает или закрывает элемент <details>. Элемент <details> используется для предоставления дополнительной информации/деталей, которые пользователь может просмотреть или скрыть в соответствии с требованиями.

HTML

Полное руководство по атрибутам HTML-событий

РЕКОМЕНДУЕМЫЕ СТАТЬИ