JavaScript. Подробное руководство, 6-е издание
Шрифт:
• С появлением мобильных устройств с сенсорными экранами, поддерживающих 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» (возникающее, когда пользователь изменяет значение, отображаемое
События изменения состояния
Некоторые события не связаны непосредственно с деятельностью пользователя, но имеют отношение к выполнению сетевых операций броузером и указывают на переход к другому этапу операции или на изменение состояния. Событие «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», для отправки асинхронных извещений о ходе выполнения операций ввода-вывода.
Прикладные события
Некоторые прикладные интерфейсы, определяемые стандартом HTML5 и связанными с ним спецификациями, включают собственные типы событий. Интерфейс drag-and-drop (раздел 17.7) определет такие события, как «dragstart», «dragenter», «dragover» и «drop». Приложения, обеспечивающие поддержку буксировки элементов мышью, должны реализовать обработку некоторых из этих событий. Элементы
Обработчики ошибок и событий от таймеров
Обработчики ошибок и событий от таймеров (были описаны в главе 14) являются частью асинхронной модели программирования в клиентском JavaScript и похожи на обработчики обычных событий. Несмотря на то что обработчики ошибок и событий от таймеров не рассматриваются в этой главе, их очень удобно воспринимать как обработчики обычных событий, и, возможно, вам будет интересно прочитать разделы 14.1 и 14.6 еще раз, с позиций, предлагаемых этой главой.
Для событий «submit» и «reset» предусматриваются действия по умолчанию, выполнение которых можно отменить в обработчиках событий, как и в случае некоторых событий «click». Все события форм всплывают, кроме событий «focus» и «blur». IE определяет события «focusin» и «focusout», которые являются всплывающими альтернативами событий «focus» и «blur». Библиотека jQuery (глава 19) имитирует события «focusin» и «focusout» в броузерах, не поддерживающих их.
Кроме того, эти события были стандартизованы спецификацией «DOM Level 3 Events».
Наконец, имейте в виду, что все броузеры, кроме IE, возбуждают событие «input» в элементах