На этом шаге мы рассмотрим общие правила обработки событий.
В объектной модели HTML с каждым элементом страницы можно связать определенное действие пользователя: щелчок кнопкой мыши, нажатие клавиши клавиатуры, перемещение в области элемента курсора мыши и т.д. Эта технология основана на фундаментальном понятии события в операционных системах с графическим интерфейсом пользователя. Каждое действие пользователя является причиной возникновения сообщения в операционной системе. Свойства объектов-событий можно использовать для получения информации о событии. При возникновении любого события автоматически создается объект event объекта window.
Напомним, что в таблице 2 шага 41 перечислены основные события объекта document. Всем им передается в качестве параметра значение типа event. Свойства этого объекта могут быть использованы в обработчике соответствующего события следующим образом:
. . . . . function document.onkeypress() { //Возникает при нажатии и отпускании //символьной клавиши . . . . . alert ("Была нажата клавиша:"+ String.fromCharCode(event.keyCode)); . . . . . }
Полный перечень свойств объекта event приведен в приложении 1.
Однако, как было сказано выше, не только объект document может обрабатывать события. На этом шаге мы познакомимся с общими правилами обработки событий и рассмотрим основные свойства объекта event.
Любое событие имеет свой жизненный цикл: от момента возникновения действия или условия, являющегося причиной генерирования события, до выполнения последнего оператора обработчика события или финальных действий браузера. Цикл жизни любого типичного события включает следующие этапы:
- Происходит действие пользователя или возникает условие, которое возбуждает событие.
- Тотчас же корректируется объект event, чтобы отразить параметры возникшего события.
- Событие генерируется - это и есть истинное сообщение о возникшем событии.
- Вызывается обработчик событий элемента-источника события, который выполняет определенные программистом действия и завершает свою работу.
- Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта-источника события. Это "всплытие" вверх по иерархии объектов продолжается, пока не будет достигнут самый верхний объект иерархии - объект window, или обработчик события какого-либо объекта не аннулирует событие.
- Выполняются заключительные действия по умолчанию, если таковые определены, но при условии, что событие не было аннулировано.
Если для элемента-источника события не определен обработчик, событий, то в иерархии объектов определяется его родитель, и обработчик событий родителя выполняет соответствующие действия по обработке события. И так происходит до корневого объекта иерархии.
Какие удобства предоставляет подобная технология обработки событии? Прежде всего, нет необходимости для каждого элемента писать процедуру обработки события и присоединять ее к нему. Достаточно написать одну процедуру для элемента-родителя, и она будет обрабатывать события, возбуждаемые всеми порожденными родителем элементами. Это позволяет централизованно обрабатывать наиболее часто возникающие события, и, как результат, требует меньше усилий и времени для написания и поддержки кода процедур обработки событий.
Следующий пример демонстрирует технику передачи события вверх по иерархии объектов. В нем щелчки кнопкой мыши на всех элементах страницы обрабатываются централизованно обработчиком события элемента <BODY>, который является родителем всех элементов страницы:
<HTML>
<HEAD>
<TITLE>Передача обработки события родителю</TITLE>
</HEAD>
<BODY ONCLICK="JavaScript: alert ('Не надо щелкать!');">
<H2>Это заголовок</H2>
<P>
Щелкните по тексту, либо по заголовку. Будет вызван обработчик события
<B>onclick()</B> тэга <B><BODY></B>.
</BODY>
</HTML>
Щелчок на любом элементе документа приводит к отображению диалогового окна предупреждений из функции обработки события onclick() объекта BODY.
Результат просмотра этого документа в браузере изображен на рисунке 1.
Рис.1. Результат работы приложения
Если к какому-нибудь элементу добавить собственный обработчик событий, то будут выполнены две процедуры: самого элемента и элемента родителя. Если элемент расположен достаточно глубоко в иерархии объектов, и каждый элемент, расположенный выше него, имеет также собственный обработчик событий, то неужели событие будет обрабатываться всеми обработчиками? Да, именно это и произойдет, если только какой-то обработчик не аннулирует "всплывающее" вверх по иерархии событие. Объект event имеет свойство cancelBubble, которое позволяет аннулировать событие, если установить его значение равным true. После этого соответствующее событие не существует, и обработчики этого события для всех, расположенных выше элементов, не вызываются.
Изменим последний пример. Обработчик щелчка по заголовку аннулирует это событие (изменен только тэг <H2>):
<H2 ONCLICK="VBScript: window.event.cancelBubble=true"> Это заголовок</H2>
Каждый элемент HTML может быть источником многих событий. В таблице 2 шага 41 представлены события, которые могут генерировать и обрабатывать все элементы страницы.
На следующем шаге мы рассмотрим свойства объекта event.
