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

Наконец, стандарт HTML5 и связанные с ним спецификации определяют еще несколько различных типов событий. Спецификация «Web Storage АРІ» (раздел 20.1) определяет событие «storage» (генерируемое в объекте Window), извещающее об изменении хранимых данных. В спецификации HTML5 также определены события «beforeprint» и «afterprint», впервые введенные компанией Microsoft в IE. Как следует из их имен, эти события генерируются в окне Window непосредственно до и после того, как документ будет напечатан, и предоставляют возможность добавить или удалить содержимое, такое как дата и время печати документа. (Эти события не должны использоваться для изменения представления документа для печати, потому что для этой цели в CSS уже имеются директивы определения типа носителя.)

17.1.4. События, генерируемые сенсорными экранами и мобильными устройствами

Широкое распространение мощных мобильных устройств, особенно устройств с сенсорными экранами, потребовало создания новых категорий событий. Во многих случаях события от сенсорных экранов отображаются на традиционные типы событий, такие как «click» и «scroll». Но не все виды взаимодействий с пользовательским интерфейсом через сенсорный экран можно имитировать с помощью мыши, и не все прикосновения к такому экрану можно интерпретировать, как события от мыши. В этом разделе кратко описываются жесты и события прикосновений, генерируемые броузером Safari, когда он выполняется на устройствах iPhone и iPad компании Apple, а также рассматривается событие «orientationchange», генерируемое, когда пользователь поворачивает устройство. На момент написания этих строк данные события не были стандартизованы, но консорциум W3C уже приступил к работе над спецификацией «Touch Events Specification», в которой за основу приняты события прикосновения, внедренные компанией Apple. Эти события не описываются в справочном разделе данной книги, но дополнительную информацию вы сможете найти на сайте Apple Developer Center .

Броузер Safari генерирует события для жестов масштабирования и вращения из двух пальцев. Событие «gesturestart» возбуждается, когда начинается выполнение жеста, а событие «gestureend» по его окончании. Между этими двумя событиями генерируется последовательность событий «gesturechange», позволяющих отслеживать выполнение жеста. Объект события, передаваемый вместе с этими событиями, имеет числовые свойства scale и rotation. Свойство scale определяет отношение текущего и начального расстояний между двумя пальцами. Для жеста, когда пальцы сводятся, свойство scale получает значение меньше 1.0, а для жеста, когда пальцы разводятся, свойство scale получает значение больше 1.0. Свойство rotation определяет угол поворота пальцев с момента события «gesturestart». Значение угла всегда является положительным и измеряется в градусах по часовой стрелке.

События жестов являются высокоуровневыми событиями, извещающими о жесте, уже прошедшем интерпретацию. Реализовать поддержку собственных жестов можно с помощью обработчиков низкоуровневых событий прикосновений. Когда палец касается экрана, генерируется событие «touchstart». Когда палец перемещается, генерируется событие «touchmove». А когда палец отнимается от экрана, генерируется событие «touchend». В отличие от событий мыши, события прикосновений не несут непосредственной информации о координатах прикосновения. Вместо этого в объекте события, который поставляется вместе с событием прикосновения, имеется свойство changedTouches. Это свойство хранит объект, подобный массиву, каждый элемент которого описывает позицию прикосновения.

Событие «orientationchanged» генерируется в объекте Window устройствами, позволяющими пользователям поворачивать экран для перехода из книжной ориентации в альбомную. Объект, передаваемый вместе с событием «orientationchanged», не очень полезен сам по себе. Однако в мобильной версии броузера Safari объект Window имеет свойство orientation, определяющее текущую ориентацию в виде числовых значений 0, 90, 180 или -90.

17.2. Регистрация обработчиков событий

Существует два основных способа регистрации обработчиков событий. Первый, появившийся на раннем этапе развития Всемирной паутины, заключается в установке свойства объекта или элемента документа, являющегося целью события. Второй способ, более новый и более универсальный, заключается в передаче обработчика методу объекта или элемента. Дело осложняется тем, что каждый прием имеет две версии. Свойство обработчика события можно установить в программном коде на языке JavaScript или в элементе документа, определив соответствующий атрибут непосредственно в разметке HTML. Регистрация обработчиков вызовом метода может быть выполнена стандартным методом с именем addEventListener, который поддерживается всеми броузерами, кроме IE версии 8 и ниже, и другим методом, с именем attachEvent, поддерживаемым всеми версиями IE до IЕ9.

17.2.1. Установка свойств обработчиков событий

Самый простой способ зарегистрировать обработчик события заключается в том, чтобы присвоить свойству целевого объекта события желаемую функцию обработчика. По соглашению свойства обработчиков событий имеют имена, состоящие из слова «оп», за которым следует имя события: onclick, onchange, onload, onmouseover и т. д. Обратите внимание, что эти имена свойств чувствительны к регистру и в них используются только строчные символы, даже когда имя типа события состоит из нескольких слов (например «readystatechange»). Ниже приводятся два примера регистрации обработчиков событий:

  // Присвоить функцию свойству onload объекта Window.
  // Функция - обработчик события: она вызывается, когда документ будет загружен.
  window.onload = function {
   // Отыскать элемент <form>
   var elt = document.getElementById("shipping_address");
   // Зарегистрировать обработчик события, который будет вызываться
   // непосредственно перед отправкой формы.
   elt.onsubmit = function { return validate(this); }
  }

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

Недостаток использования свойств обработчиков событий состоит в том, что они проектировались в предположении, что цели событий будут иметь не более одного обработчика для каждого типа событий. При создании библиотеки для использования в произвольных документах для регистрации обработчиков лучше использовать прием (такой как вызов метода addEventListener), не изменяющий и не затирающий ранее зарегистрированные обработчики.

17.2.2. Установка атрибутов обработчиков событий

Свойства обработчиков событий в элементах документа можно также устанавливать, определяя значения атрибутов в соответствующих HTML-тегах. В этом случае значение атрибута должно быть строкой программного кода на языке JavaScript. Этот программный код должен быть не полным объявлением функции обработчика события, а только ее телом. То есть реализация обработчика события в разметке HTML не должна заключаться в фигурные скобки и предваряться ключевым словом function. Например:

  <button onclick="alert( 'Спасибо'); "Щелкните здесь</button>