Шаг 45.
Основы JavaScript.
Обработка событий

    На этом шаге мы рассмотрим общие правила обработки событий.

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

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

.    .     .     .     .
function document.onkeypress()
{
  //Возникает при нажатии и отпускании 
  //символьной клавиши
.    .     .     .     .
  alert ("Была нажата клавиша:"+
               String.fromCharCode(event.keyCode));
.    .     .     .     .
}

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

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

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

  1. Происходит действие пользователя или возникает условие, которое возбуждает событие.
  2. Тотчас же корректируется объект event, чтобы отразить параметры возникшего события.
  3. Событие генерируется - это и есть истинное сообщение о возникшем событии.
  4. Вызывается обработчик событий элемента-источника события, который выполняет определенные программистом действия и завершает свою работу.
  5. Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта-источника события. Это "всплытие" вверх по иерархии объектов продолжается, пока не будет достигнут самый верхний объект иерархии - объект window, или обработчик события какого-либо объекта не аннулирует событие.
  6. Выполняются заключительные действия по умолчанию, если таковые определены, но при условии, что событие не было аннулировано.

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

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

    Следующий пример демонстрирует технику передачи события вверх по иерархии объектов. В нем щелчки кнопкой мыши на всех элементах страницы обрабатываются централизованно обработчиком события элемента <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.




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