× К оглавлению На главную Об авторе

Дата и время публикации:

Назначение и классификация

1. Что это такое

В статье "Как использовать атрибуты событий в Javascript, речь шла о механике возникновения событий, путях распространения, обработки и реакции на них в документе HTML5, называемой часто страницей "WEB". При этом в ней функциональное назначение и само определение АГС не было раскрыто.

Итак, согласно рекомендациям W3С к атрибутам глобальных событий, относятся "встраиваемые" атрибуты, применяемые во всех элементах и форм документа <html> после воздействия пользователем над ними с использованием браузера WEB и/или технических устройств с целью ввода/вывода информации. Поэтому АГС имеют определенную классификацию по элементам <html> и совместного использования их вместе с устройствами ввода-вывода информации.

2. Классификация или игра в классики

Помните дескую игру в классики, где задача последовательно перемещать плоскую баночку от ваксы или крема строго по клеткам не пропуская ни одной. У большинства это не всегда получалось, так и с АГС любая попытка четко что-либо описать обречена на провал, так как W3С только рекомендует, а не предписывает.

3 Классификация по элементам документа HTML

3.1 Элемент <body>

Один из основных образующих элементов документа HTML, наделенный возможностью отзываться на порожденные пользователем события с использованием АГС, которые действуют, когда объект <Window> формирует одноименные события без префикса "on" с последующим вызовом обработчика событий функции JS, назначенного с помощью одного из атрибутов, перечисленных в таблице 3.1.1

Таблица 3.1.1
Aтрибут Пользователь Примечание
onafterprint передал документ HTML на печать [1]
onbeforeprint передает документ HTML на печать [2]
onbeforeunload закрывает документ HTML [3]
onhashchange произвел изменение URL [4]
onlanguagechange изменил язык документа HTML в браузере [5]
onmessage получил от сервера сообщение об изменении страницы [6]
onoffline пользователь перевел работу браузера в фоновый режим(offline) [7]
ononline пользователь вывел браузер из фонового режима(online) [7]
onpagehide пользователь "покинул" страницу [8]
onpageshow пользователь перешел на страницу [9]
onpopstate добавил или изменил запись для данной страницы в браузере. [10]
onstorage сохранил или удалил данные в браузере [11]
onunload ушел со странице или закрыл браузер [8] для события "pagehide"
Примечания [1] – событие "afterprint" так же может формироваться после закрытия диалога печати. [2] – событие "beforeprint" выдается до появления диалога печати. [3] – событие "onbeforeunload" позволяет выводить всплывающее сообщение с запросом от пользователя подтверждения на закрытия документа. [4] – случается тогда, когда к текущей URL "цепляется" якорная часть (anchor part) с использованием символа '#'. [5] – на момент публикации событие "onlanguagechange" являлось экспериментальным и поддерживаемым не всеми браузерами [6] – событие "message" позволяет определить причину его возникновения с помощью поддерживаемых объектом event следующих свойств: – data, хранящее фактическое сообщение; – origin, содержащее URL документа от которого "прилетело" сообщение; – lastEventId, указывающее на идентификатор последнего принятого сообщения в общем потоке ему подобных. Событие "message" порождается в ответ на следующие события: – "open", когда открывается соединение с сервером; – "error", когда возникли какие-либо проблемы. [7] – фактически в каком режиме "online" или "offline" находится браузер можно определить по свойству "navigator.onLine", которое будет содержать соответственно значение TRUE или FALSE. [8] – событие "pagehide" формируется, когда пользователь в браузере: – нажал и осуществил переход по ссылке в документе HTML; – произвел "глобальное" обновление документ(page refreshing); – осуществил отправку данных формы; – закрыл окно браузера – и т.д. событие "pagehide" иногда используется вместо события "unload", так как при использование этого события страница WEB не кэшируется. [9] – событие "pageshow" подобно "onload", исключая того, что оно случается при первой загрузке страницы, в то время как последнее формируется каждый раз при её обновлении. [10] – событие "popstate" формируется, когда используются методы pushState() и replaceState() объекта history, которые позволяют добавлять и изменять записи истории, соответственно. [11] – событие "storage" формируется, когда осуществляется запись или чтение данных с использованием новой технологии HTML5 Web Storage, которая представляет собой подобие базе данных, позволяя пользователям сохранять данные в форме ключ/значение. В отличие от "cookies", разрешающих хранить браузерам локально данные не более 4 КБайт, в данной технологии разрешается до 10 МБайт.

В таблице 3.1.2 приводятся два сигнала объекта <Window> порождаемые объектом <Promise> для информирования браузера о результате выполнения асинхронных операций.

Таблица 3.1.2
Aтрибут объект <Window> испускает событие Примечание
onrejectionhandled при возникновении отказа после очередной итерации цикла формирования событий. При условии, что ранее ему был определен обработчик.
onunhandledrejection когда нет в данный момент ни одного из доступных обработчиков ожидаемого отказа в основном цикле формирования событий.  

3.2 Элементы HTML

Здесь перечисляются ГАС, которые используются во всех элементах документа HTML, включая элемент <body>.

3.2.1 Элемент <form>

В таблице 3.2.1 приводится распределение атрибутов событий для элемента <form> и ему подчиненых элементов таких как <input>, <button>, <TextArea>и<select>. Последний используется совместно с комбинацией элементов <optgroup> и <option>.

Таблица 3.2.1
Aтрибут Элемент(ы) HTML Пользователь выполнил Примечание
onsubmit <form> выполнил отправку данных формы  
onreset осуществил сброс введенных данных формы
onfocus <input> произвел выбор элемента [1]
<button>
<TextArea>
<select>, <optgroup> и <option>
onblur <input> перешел на другой элемент [1]
<button>
<TextArea>
<select>, <optgroup> и <option>
onselect <input> произвел выделение текста или выбрал новый элемент в раскрывающемся списке, а также в списке с одним или множественным выбором  
<button>
<TextArea>
onchange <input> изменил данные элемента формы  
<button>
<TextArea>
<select>, <optgroup> и <option>
oninput <input> произвел ввод данных; событие oninput выполняется быстрее чем onchange, т.к последний ждет снятие фокуса с элемента.  
<TextArea>
<keygen>
<select>
oninvalid <input> произвел отправку данных в одном или нескольких полей формы не соответствующих своим условиям. [2]
<TextArea>
<select>, <optgroup> и <option>
onsearch <input> ввел данные в поле поиска формы [3]
Примечания [1] – атрибуты onblur и onfocus используются для назначения обработчиков событий не только элементам HTML, но и элементу <body> и могут подменены. [2] – cобытие "invalid" формируется до отправки элементов из формы, когда они были признаны невалидными. Таким примером может служить незаполненный элемент <input> с установленным атрибутом "required". [3] – cобытие "search" формируется, когда в элементе <input> установлен атрибут "type" cо значением одноименного события.

4. Библиография

1) HTML 5.1. W3C Recommendation, 1 November 2016

2) HTML5 Event Attributes

3) Window Event Attributes

4) HTML: The Markup Language (an HTML language reference), 8.Global attributes

5) The form element

6) MDN.GlobalEventHandlers.oninput

7) Справочник по CSS. Псевдокласс required

8) onsearch Event

9) HTML5 Server-Sent Events

10) Управление историей браузера

11) Promises and Asynchronous Programming

12) HTML5 Web Storage