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

17.1.1.1. События форм

17.1.1.1. События форм

Формы и гиперссылки стали первыми элементами веб-страниц, возможность управления которыми была реализована в начале развития Всемирной паутины и JavaScript. Это означает, что события форм являются наиболее устойчивыми и хорошо поддерживаемыми из всех типов событий. Элементы <form> возбуждают события «submit», при отправке формы, и «reset»,   перед сбросом формы в исходное состояние. Элементы форм, внешним видом напоминающие кнопки (включая радиокнопки и флажки), возбуждают события «click», когда пользователе взаимодействуют с ними. Элементы форм, позволяющие вводить некоторую информацию, обычно возбуждают события «change», когда пользователь изменяет их состояние, вводя текст, выбирая элемент списка или отмечая флажок. Для текстовых элементов ввода событие «change» не возбуждается, пока пользователь не завершит взаимодействие с ними и не передаст фокус ввода другому элементу. Элементы форм откликаются на изменение фокуса ввода, возбуждая события «focus» и «blur» при получении и утере фокуса ввода.

Все эти события, связанные с формами, подробно рассматривались в разделе 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», для отправки асинхронных извещений о ходе выполнения операций ввода-вывода.

Прикладные события

Некоторые прикладные интерфейсы, определяемые стандартом HTML5 и связанными с ним спецификациями, включают собственные типы событий. Интерфейс drag-and-drop (раздел 17.7) определет такие события, как «dragstart», «dragenter», «dragover» и «drop». Приложения, обеспечивающие поддержку буксировки элементов мышью, должны реализовать обработку некоторых из этих событий. Элементы <video> и <audio> (раздел 21.2), определяемые стандартом HTML5, добавляют длинный список связанных с ними типов событий, таких как «waiting», «playing», «seeking», «volumechange» и т. д. Эти события обычно представляют интерес только для веб-приложений, определяющих собственные элементы управления проигрыванием аудио- и видеороликов.

Обработчики ошибок и событий от таймеров

Обработчики ошибок и событий от таймеров (были описаны в главе 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» в элементах <textarea> и в других текстовых элементах ввода, когда пользователь вводит текст (посредством клавиатуры или вставкой из буфера обмена) в элемент. В отличие от события «change», данное событие «input» возбуждается при каждой вставке. К сожалению, объект события, соответствующий событию «input», не позволяет узнать, какой текст был введен. (Более полезной альтернативой этому событию является новое событие «textinput», описываемое ниже.)

Оглавление книги