JavaScript. Подробное руководство, 6-е издание

Из новшеств, появившихся в спецификации «DOM Level 3 Events», можно назвать стандартизацию поддержки двунаправленных колесиков мыши через событие «wheel» и улучшенную поддержку событий ввода текста через событие «textinput» и новый объект KeyboardEvent, который передается обработчикам событий «keydown», «кеуир» и «keypress».

Согласно этой спецификации обработчику события «wheel» должен передаваться объект события, содержащий все свойства, обычные для объектов событий от мыши, а также свойства deltaX, deltaY и deltaZ, позволяющие узнать величину прокрутки вокруг трех разных осей колесика мыши. (В большинстве мышей колесико вращается в одном или двух измерениях, и поэтому свойство deltaZ пока остается неиспользуемым.) Подробнее о событиях «mousewheel» рассказывается в разделе 17.6.

Стандарт «DOM Level 3 Events» определяет событие «keypress», описанное выше, но не рекомендует использовать его и отдает предпочтение новому событию с именем «textinput». Вместо сложного в использовании числового значения в свойстве keyCode, объект события, передаваемый обработчикам события «textinput», имеет свойство data, содержащее введенную строку текста. Событие «textinput» не является в полной мере событием от клавиатуры: оно возбуждается при выполнении любой операции ввода текста, которая может быть выполнена с помощью клавиатуры, копированием из буфера обмена, операцией буксировки (drag-and-drop) и т. д. Спецификация определяет свойство inputMethod объекта события и множество констант, представляющих различные способы ввода текста (с клавиатуры, копированием из буфера обмена или буксировкой мышью, путем распознавания рукописного текста или голоса и т. д.). К моменту написания этих строк броузеры Safari и Chrome поддерживали версию этого события с именем «textlnput». Соответствующий ему объект события включает свойство data, но в нем отсутствует свойство inputMethod. Пример использования события «textlnput» приводится в разделе 17.8.

Новый стандарт DOM также упрощает события «keydown», «кеуир» и «keypress», добавляя новые свойства key и char в объект события. Оба эти свойства содержат строковые значения. Для клавиш, генерирующих печатаемые символы, свойства key и char будут хранить один и тот же сгенерированный текст. Для управляющих клавиш свойство key будет хранить строку вида «Enter», «Delete» или «Left», идентифицирующую клавишу. А свойство char будет хранить либо значение null, либо, для таких управляющих клавиш, как Tab, - имеющих соответствующий управляющий символ, - строку, сгенерированную клавишей. На момент написания этих строк ни один броузер не поддерживал эти свойства key и char, но пример 17.8 будет использовать свойство key, когда оно будет реализовано.

17.1.3. События HTML5

Стандарт HTML5 и связанные с ним стандарты определяют основу новых API для веб-приложений (глава 22). Многие из этих API определяют события. В этом разделе перечисляются и коротко описываются эти события HTML5 и веб-приложений. Некоторые из этих событий уже готовы к использованию и более подробно описываются в разных главах книги. Другие пока реализованы не во всех броузерах и не описываются подробно.

Одной из широко рекламируемых особенностей HTML является возможность включения элементов <audio> и <video> для проигрывания аудио- и видеороликов. Эти элементы имеют длинный перечень генерируемых ими событий, позволяющих отправлять извещения о сетевых событиях, о состоянии механизма буферизации данных и механизма воспроизведения:

Эти события, имеющие отношение к медиапроигрывателям, передаются в виде простого объекта события, не имеющего специальных свойств. Однако свойство target идентифицирует элемент <audio> или <video>, и этот элемент имеет множество специфических свойств и методов. Более подробно об этих элементах, их свойствах и событиях рассказывается в разделе 21.2.

Интерфейс механизма буксировки (drag-and-drop), определяемый стандартом HTML5, позволяет приложениям на языке JavaScript участвовать в операциях буксировки объектов мышью, опираясь на механизмы, реализованные в операционной системе, и обмениваться данными с обычными приложениями. Этот прикладной интерфейс определяет следующие семь типов событий:

  dragstart
  dragenter
  drop
  drag
  dragover
  dragend
  dragleave

Эти события буксировки сопровождаются объектами событий, подобными тем, что передаются вместе с событиями от мыши. Отличаются они единственным дополнительным свойством dataTransfer, хранящим объект DataTransfer с информацией о передаваемых данных и о форматах, в которых эти данные доступны. Прикладной интерфейс механизма drag-and-drop, определяемый стандартом HTML5, описывается и демонстрируется в разделе 17.7.

Спецификация HTML5 определяет также механизм управления историей посещений (раздел 22.2), что позволяет веб-приложениям взаимодействовать с кнопками броузера Back (Назад) и Forward (Вперед). Этот механизм вводит события с именами «hashchange» и «popstate», которые возникают тогда же, когда и события «load» и «unload», и возбуждаются в объекте Window, а не в документе.

В HTML5 определяется множество новых особенностей HTML-форм. В дополнение к событиям ввода, описанным выше, спецификация HTML5 также определяет механизм проверки форм, который привносит событие «invalid», возбуждаемое в элементе формы, не прошедшем проверку. Однако производители броузеров, кроме Opera, не торопятся воплощать новые особенности форм и новые события, поэтому они не рассматриваются в этой книге.

Спецификация HTML5 включает поддержку веб-приложений, способных выполняться без подключения к сети (раздел 20.4), которые могут быть установлены локально в кэше приложений, чтобы их можно было запускать, даже когда броузер работает в автономном режиме (например, когда мобильное устройство находится вне сети). С этой поддержкой связаны два наиболее важных события, «offline» и «online»: они генерируются в объекте Window, когда броузер теряет или обретает соединение с сетью. Кроме того, определено несколько дополнительных событий, посредством которых приложение извещается о ходе выполнения загрузки и обновления кэша приложений:

  cached checking downloading error
  noupdate obsolete progress updateready

Событие «message» используется множеством новых API веб-приложений для организации асинхронных взаимодействий. Прикладной интерфейс взаимодействий между документами (раздел 22.3) позволяет сценариям в документе с одного сервера обмениваться сообщениями со сценариями в документе с другого сервера. Это дает возможность безопасно обойти ограничения политики общего происхождения (раздел 13.6.2). При передаче каждого сообщения в объекте Window документа, принимающего сообщение, генерируется событие «message». Объект события, передаваемый обработчику, включает свойство data, хранящее содержимое сообщения, а также свойства source и origin, идентифицирующие отправителя сообщения. Событие «message» используется также для взаимодействия с фоновыми потоками Web Workers (раздел 22.4) и для сетевых взаимодействий посредством прикладных интерфейсов, определяемых спецификациями «Server-Sent Events» (раздел 18.3) и «WebSockets» (раздел 22.9).

Стандарт HTML5 и связанные с ним спецификации определяют некоторые события, генерируемые в объектах, не являющихся окнами, документами и элементами документов. Версия 2 спецификации «XMLHttpRequest», а также спецификация «File АРІ» определяют множество событий, помогающих следить за ходом выполнения асинхронных операций ввода/вывода. Эти события генерируются в объектах XMLHttpRequest или FileReader. Каждая операция чтения начинается с события «loadstart», за которым следует последовательность событий «progress» и событие «loadend». Кроме того, каждая операция завершается событием «load», «error» или «abort», генерируемым непосредственно перед заключительным событие^ «loadend». Подробнее об этих событиях рассказывается в разделах 18.1.4 и 22.6.5.