На этом шаге мы узнаем, как можно обработать то или иное событие.

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

Напомним, что в таблице 2 шага 78 перечислены основные события объекта Document. Всем им передается в качестве параметра значение типа Event. Свойства этого объекта могут быть использованы в обработчике соответствующего события следующим образом:

.    .     .     .     .
Sub Document_OnKeyPress(X)
'Возникает при нажатии и отпускании 
'символьной клавиши.
.    .     .     .     .
    Alert “Была нажата клавиша: ”&Chr(X.keyCode)
.    .     .     .     .
End Sub
.    .     .     .     .

Полный перечень свойств объекта Event приведен в приложении 14.

Однако, как было сказано выше, не только объект Document может обрабатывать события. В этом разделе мы познакомимся с общими правилами обработки событий и рассмотрим основные свойства объекта Event.

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

1. Происходит действие пользователя или возникает условие, которое возбуждает событие.

2. Тотчас же корректируется объект Event, чтобы отразить параметры возникшего события.

3. Событие генерируется — это и есть истинное сообщение о возникшем событии.

4. Вызывается обработчик событий элемента-источника события, который выполняет определенные программистом действия и завершает свою работу.

5. Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта-источника события. Это "всплытие" вверх по иерархии объектов продолжается, пока не будет достигнут самый верхний объект иерархии — объект Window, или обработчик события какого-либо объекта не аннулирует событие.

6. Выполняются заключительные действия по умолчанию, если таковые определены, но при условии, что событие не было аннулировано.

Если для элемента-источника события не определен обработчик, событий, то в иерархии объектов определяется его родитель, и обработчик событий родителя выполняет соответствующие действия по обработке события. И так происходит до корневого объекта иерархии.

Какие удобства предоставляет подобная технология обработки событии? Прежде всего, нет необходимости для каждого элемента писать процедуру обработки события и присоединять ее к нему. Достаточно написать одну процедуру для элемента-родителя, и она будет обрабатывать события, возбуждаемые всеми порожденными родителем элементами. Это позволяет централизованно обрабатывать наиболее часто возникающие события, и, как результат, требует меньше усилий и времени для написания и поддержки кода процедур обработки событий.

Следующий пример демонстрирует технику передачи события вверх по иерархии объектов. В нем щелчки кнопкой мыши на всех элементах страницы обрабатываются централизованно обработчиком события элемента <BODY>, который является родителем всех элементов страницы:

<HTML>
<HEAD>
<TITLE>Передача обработки события родителю</TITLE>
</HEAD>
<BODY ONCLICK="VBScript: Alert 'Не надо щелкать!'">
<H2>Это заголовок</H2>
<P>
Щелкните по тексту, либо по заголовку. Будет вызван обработчик события 
<B>OnClick</B> тэга <B>&LT;BODY&GT;</B>.
</BODY>
</HTML>

Текст этого HTML-документа можно взять здесь.

Щелчок на любом элементе документа приводит к отображению диалогового окна предупреждений из процедуры обработки события OnClick объекта BODY.

Результат просмотра этого документа в браузере изображен на рисунке 1.

Рис.1. Передача обработки события родителю

Если к какому-нибудь элементу добавить собственный обработчик событий, то будут выполнены две процедуры: самого элемента и элемента родителя. Если элемент расположен достаточно глубоко в иерархии объектов, и каждый элемент, расположенный выше него, имеет также собственный обработчик событий, то неужели событие будет обрабатываться всеми обработчиками? Да, именно это и произойдет, если только какой-то обработчик не аннулирует "всплывающее" вверх по иерархии событие. Объект Event имеет свойство cancelBubble, которое позволяет аннулировать событие, если установить его значение равным True. После этого соответствующее событие не существует, и обработчики этого события для всех, расположенных выше элементов, не вызываются.

Изменим последний пример. Обработчик щелчка по заголовку аннулирует это событие (изменен только тэг <H2>):

<H2 ONCLICK="VBScript: Window.Event.cancelBubble=True"> Это заголовок</H2>

Каждый элемент HTML может быть источником многих событий. В таблице 1 шага 78 представлены события, которые могут генерировать и обрабатывать все элементы страницы.

В заключение рассмотрим некоторые свойства объекта Event.

Как уже отмечалось, объект Event создается автоматически всякий раз, когда возникает какое-либо событие. Этот объект не зависит от используемого языка создания сценария, и его использование в процедурах обработки событий для получения информации о сгенерированном событии является предпочтительным способом получения достоверной информации о событии.

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

Свойство srcElement определяет элемент документа, явившийся источником события. Оно может быть полезным при централизованной обработке событий элементом, расположенным выше в иерархии объектов документа истинного "виновника" события, и, в зависимости от типа элемента, программа-обработчик может предпринять соответствующие действия.

Важное свойство cancelBubble, аннулирующее событие и прекращающее передачу его на обработку вверх по иерархии объектов, рассмотрено немного ранее в этом же разделе.

Свойство returnValue является булевым и возвращает значение True или False после завершения выполнения процедуры обработки события. При передаче события вверх по иерархии значение этого свойства можно использовать для альтернативной обработки события. Кроме того, если в обработчике события элемента, для которого определены действия по умолчанию, это свойство устанавливается равным False, то это отменяет выполнение действий по умолчанию. Одним из таких элементов является тэг <А>, действием по умолчанию которого является переход по ссылке, задаваемой параметром HREF.

По значениям свойств altKey, ctrlKey и shiftKey элемента-источника события определяется, была ли нажата, соответственно, клавиша Alt, Ctrl или Shift в момент возникновения события. Значение свойства равно True, если клавиша была нажата, и False — в противном случае.

Замечание. Установка значения свойства returnValue равным False не аннулирует событие. Оно продолжает "всплывать" по иерархии объектов. Отменяется только действия по умолчанию элемента, являющегося источником события.

Для событий мыши определены свойства, значениями которых являются координаты положения курсора в момент возникновения события.

Свойства clientX и clientY представляют координаты относительно области отображения браузера, offsetX и offsetY являются координатами относительно элемента-контейнера, в котором расположен элемент-источник события, screenX и screenY — абсолютные координаты курсора мыши, т.е. координаты экрана монитора. Все значения этих свойств определены в пикселях. Свойства Х и Y определяют положение курсора мыши по горизонтали и вертикали относительно позиционированного контейнера, содержащего элемент-источник события. Если ни один контейнер не позиционирован, то положение определяется относительно тела документа <BODY>.

Полезное свойство событий мыши Button определяет нажатую кнопку мыши. Его возможные значения:

0 – ни одна;
1 – левая;
2 – правая;
3 – одновременно левая и правая;
4– средняя;
5 – одновременно левая и средняя;
6 – одновременно правая и средняя;
7– все три одновременно.

Свойства toElement и fromElement применимы только к событиям OnMouseOver() и OnMouseOut(). Они определяют, от какого элемента и к какому перемещался курсор мыши, и полезны при анализе этих действий для вложенных элементов.

Некоторые элементы на HTML-странице могут получить фокус. В каждый момент времени только один элемент может обладать фокусом, и ввод данных с клавиатуры направляется именно этому элементу. Наиболее часто используемыми элементами с фокусом являются кнопки (Button) и некоторые типы элемента Input. Для таких элементов при получении ими фокуса генерируется событие OnFocus(), а при потере фокуса — событие OnBlur(). Элемент получает фокус при щелчке на нем кнопкой мыши или перемещением на этот элемент с помощью клавиш клавиатуры.

При выделении на странице части документа возникают события, регистрирующие эти действия. Событие OnSelectStart() генерируется, когда пользователь нажимает кнопку мыши при расположении курсора в области документа. Если после этого нажатия он перемещает курсор мыши по документу (не отпуская нажатую кнопку), то инициируется событие OnSelect(), регистрирующее выделение части документа. У этого события есть действия по умолчанию: визуально отметить выделенную часть документа изменением ee фона. Это действие можно отменить, установив значение свойства retumVaiue события равным False в процедуре обработки этого события.

Для самого документа существуют два события, отмечающие некоторые стадии его обработки браузером. На самом деле эти события относятся к объекту Window, находящемуся на вершине иерархии объектов, но обработчики этих событий задаются в тэге <BODY> документа. Событие OnLoad() происходит сразу же после того, как были загружены в окно браузера все элементы страницы. Его можно использовать для выполнения действий при первоначальной или повторной загрузке страницы. Событие UnLoad() генерируется до начала выгрузки документа, когда пользователь желает загрузить другой документ, и в процедуре обработки этого события можно, например, напомнить пользователю о выполнении некоторых действий перед окончательной выгрузкой страницы.

Мы закончили рассмотрение основных конструкций языка HTML. Надеемся, что изложенный материал поможет вам при создании Web-приложений.

Предыдущий шаг Содержание