Шрифт:
• События загрузки и готовности документа
• События от мыши
• Событие от колесика мыши
• События буксировки мышью
• События от клавиатуры
• События ввода текста
17.1. Типы событий
На заре развития Всемирной паутины веб-разработчикам приходилось иметь дело лишь с небольшим количеством событий: «load», «click», «mouseover» и другими. Эти довольно старые типы событий хорошо поддерживаются всеми броузерами и рассматриваются в разделе 17.1.1. По мере развития веб-платформы в нее были включены более мощные прикладные интерфейсы, а количество событий существенно увеличилось. Не существует стандарта, который определял бы полный набор событий, и к моменту написания этих строк количество поддерживаемых событий продолжает быстро увеличиваться. Эти новые события определяются в следующих трех источниках:
• Спецификация «DOM Level 3 Events», которая после долгих лет застоя стала активно разрабатываться под эгидой консорциума W3C. События DOM рассматриваются в разделе 17.1.2.
• Множество новых прикладных интерфейсов в спецификации HTML5 (и в связанных с ней дополнительных спецификациях) определяют новые события, используемые, например, для управления историей посещений, механизмом drag-and-drop (перетащил и бросил), обмена сообщениями между документами и проигрывания аудио- и видеороликов. Обзор этих событий приводится в разделе 17.1.3.
• С появлением мобильных устройств с сенсорными экранами, поддерживающих JavaScript, таких как iPhone, возникла необходимость в определении новых типов событий касаний и жестов. Некоторые примеры, специфические для устройств, выпускаемых компанией Apple, приводятся в разделе 17.1.4.
Обратите внимание, что многие из этих новых типов событий пока еще не получили широкой поддержки и определяются стандартами, которые еще находятся на стадии проектирования. В последующих разделах дается краткий обзор этих событий, но подробное их описание отсутствует. Оставшаяся часть главы полностью охватывает модель обработки событий и включает множество примеров работы с поддерживаемыми событиями. Если вы поймете, как работать с событиями в целом, вы легко сможете реализовать обработку этих новых типов событий, как только будут определены и реализованы соответствующие прикладные интерфейсы.
17.1.1. Старые типы событий
События, которые вам чаще всего придется использовать в своих веб-приложениях, обычно будут относиться к категории давно существующих и поддерживаемых всеми броузерами: это события для работы с мышью, с клавиатурой, с HTML-формами и с объектом Window. В следующих разделах описывается множество важных особенностей событий этих типов.
17.1.1.1. События форм
Формы и гиперссылки стали первыми элементами веб-страниц, возможность управления которыми была реализована в начале развития Всемирной паутины и JavaScript. Это означает, что события форм являются наиболее устойчивыми и хорошо поддерживаемыми из всех типов событий. Элементы
Все эти события, связанные с формами, подробно рассматривались в разделе 15.9.3. Тем не менее здесь следует сделать несколько важных дополнений.
События могут быть сгруппированы в некоторые обобщенные категории, знание которых поможет вам понять длинный перечень событий, следующий далее:
Аппаратно-зависимые события ввода
События из этой категории непосредственно связаны с конкретными устройствами ввода, такими как мышь или клавиатура. В эту категорию входят такие старые события, как «mousedown», «mousemove», «mouseup», «keydown», «keypress» и «keyup», а также новые события, имеющие отношение к сенсорным устройствам, такие как «touchmove» и «gesturechange».
Аппаратно-независимые события ввода
Эти события ввода не связаны непосредственно с каким-то определенным устройством. Например, событие «click» указывает на то, что была активирована ссылка или кнопка (или другой элемент документа). Это событие часто порождается щелчком мыши, но его причиной также может быть нажатие клавиши на клавиатуре или (для сенсорных устройств) некоторое перемещение по экрану. Событие «textinput» (которое пока реализовано не во всех броузерах) является аппаратно-независимой альтернативой событию «keypress» и поддерживает не только ввод с клавиатуры, но и такие альтернативы, как вставка из буфера обмена и ввод рукописного текста.
События пользовательского интерфейса
События ПИ - это высокоуровневые события, которые часто возникают в элементах HTML-форм, составляющих пользовательский интерфейс веб-приложения. В эту категорию входит событие «focus» (возникающее, когда текстовое поле получает фокус ввода), событие «change» (возникающее, когда пользователь изменяет значение, отображаемое элементом формы) и событие «submit» (возникающее, когда пользователь щелкает на кнопке отправки формы).
События изменения состояния
Некоторые события не связаны непосредственно с деятельностью пользователя, но имеют отношение к выполнению сетевых операций броузером и указывают на переход к другому этапу операции или на изменение состояния. Событие «load», которое возбуждается в объекте Window по окончании загрузки документа, является, пожалуй, наиболее часто используемым типом событий из этой категории. Еще одним представителем из этой категории является событие «DOMContentLoaded» (обсуждалось в разделе 13.3.4). Механизм управления историей посещений, определяемый стандартом HTML5 (раздел 22.2), возбуждает событие «popstate» в ответ на нажатие клавиши Back (Назад) броузера. Прикладной интерфейс автономных веб-приложений, описываемый стандартом HTML5 (раздел 20.4), включает события «online» и «offline». В главе 18 демонстрируется, как пользоваться событием «readystatechange», сообщающем о получении данных с сервера. Аналогично новый API чтения локальных файлов, выбранных пользователем (раздел 22.6.5), использует события, такие как «loadstart», «progress» и «loadend», для отправки асинхронных извещений о ходе выполнения операций ввода-вывода.