27. Понятие события и обработчики событий.

События (events) - это те средства, которые обеспечивают интерактивность web- страниц. Зная события и умея управлять ими, можно превратить простую двумерную web- страницу в трехмерную. Такая страница предлагает пользователю возможность как бы касаться, ощущать и изменять ее содержание вместо того, чтобы просто "глазеть" на нее.

Очень простым примером служит событие Click, т.е. щелчок левой кнопкой мыши. Например, можно написать JavaScript-код, который вычисляет сумму платежа с учетом выбранных пользователем товаров. Важным фактором становится определение того, когда этот код выполнять? Логичным ответом на этот вопрос является выполнение кода тогда, когда это потребуется самому пользователю. Совсем нетрудно представить себе web-страницу с кнопкой "Найти общую сумму". Тогда код для вычисления платежа нужно выполнять тогда, когда пользователь щелкнет на этой кнопке. Таким образом, щелчок на кнопке является событием. Фактически это событие и называется "Click"!

Принцип обработки событий, по существу, напоминает обработку прерываний. Но если прерывания и их обработка встроены в операционную систему, то события и их обработка тесно интегрированы с браузером, документом и пользователем.

Под событием понимается определенный сигнал, возникающий в результате действия пользователя, например

• щелчка левой кнопкой мыши (событие Click),

• двойного щелчка левой кнопкой мыши (событие DblClick),

• наведения указателя мыши на конкретный элемент документа (событие MouseOver), нажатия клавиши (событие KeyPress) и др.,

или автоматически формируемый системой при изменении ее состояния, например

• при окончании загрузки документа (событие Load),

• обнаружении ошибки (событие Error) и др.

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

Нетрудно заметить, что события называются английскими словами (регистр букв не играет роли), передающими содержательный смысл события.

Под обработчиком события (event handler) понимается код (скрипт - script), написанный на скриптовом языке (scripting language); этот скрипт перехватывает событие и выполняет некоторые ответные действия.

Например, при щелчке на кнопке активизируется ассоциированный с этим событием обработчик события и реагирует на событие Click. Названия (имена) обработчиков событий образуются добавлением префикса on к названию события, например обработчик события Click называется onClick (часто названия обработчиков событий даются на нижнем регистре, т.е onclick).

Был определен набор событий, применимых к конкретным элементам на странице. В браузерах Netscape Navigator 3 и Internet Explorer 3 эти события были определены и реализованы на языке JavaScript. В браузерах четвертого поколения события были значительно расширены, но, к сожалению, почти полностью несовместимыми для браузеров способами. Большие новшества в части событий реализованы и в браузерах пятого поколения.

В браузерах четвертого поколения модель событий усовершенствована благодаря введению объекта Event, который система автоматически формирует при возникновении любого события. Этот объект содержит информацию (она называется свойствами этого объекта) об особенностях возникшего события и состоянии определенных компонентов системы, например о нажатой клавише-модификаторе Ctrl, Alt и Shift.

Браузер Internet Explorer поддерживает расширенную объектную модель документа (Document Object Model - DOM). В этой модели все содержание документа, включая элементы и атрибуты, оказывается программно доступным и управляемым. Другими словами, в браузере каждый элемент отражается как объект иерархической структуры. Следовательно, любой элемент на странице может быть источником полного набора событий мыши и клавиатуры. Основные положения объектной модели документа в части событий сводятся к следующему:

1. Все элементы способны генерировать события.

2. Имеются события взаимодействия, события обновления и события изменения.

3. Модель событий обеспечивает реакции на действия пользователя.

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

5. События всплывают по иерархической структуре документа.

6. События асинхронны.

7. События определяются способом, нейтральным к языку и платформе.

8. Имеется интерфейс для привязки к событиям.

а тра с юс ч !§	ия простых событий
Click	Это событие применяется наиболее часто и поддерживается почти всеми браузерами.
Blur	Также поддерживается почти всеми браузерами. Событие Blur запускается, когда элемент теряет фокус, обычно когда пользователь переходит к другому элементу формы, нажимая клавишу Tab или производя щелчок левой кнопкой мыши.
Change	Это событие запускается при изменении содержимого текстового поля или текстовой области, когда изменение фиксируется переходом к другому элементу формы.
Focus	Данное событие возникает, когда указатель мыши фокусируется на

элементе, придавая ему фокус ввода.

MouseOver и MouseOut	Эти события возникают, когда указатель мыши "входит" в элемент и "выходит" из элемента.
KeyDown и KeyUp	Эти события запускаются, когда пользователь нажимает и отпускает клавишу на клавиатуре.
MouseDown и MouseUp	Помимо обработки события Click поддерживаются события MouseDown и MouseUp.
KeyPress	Это событие запускается, когда нажата клавиша.
MouseMove	Данное событие запускается всякий раз, когда указатель мыши перемещается по элементу, точнее, пикселам элемента.
SelectStart	Это событие запускается, когда пользователь начинает выбирать текст в конкретном элементе.
DragStart	Данное событие запускается, когда пользователь начинает буксировать ("тащить") конкретный элемент.
Help	Это событие запускается, когда пользователь щелкает на элементе для выбора его, а затем нажимает клавишу {F1}.
DblClick	Событие DblClick запускается, когда пользователь производит на элементе двойной щелчок. Отметим, что первый щелчок запускает событие Click, а второй щелчок, производимый в определенном временном промежутке, запускает событие DblClick.
Select	Обработчик события Select выполняется, когда выбирается текст в элементе.

Модель события (event model) конкретизирует, как действия пользователя или системы активизируют обработчики событий (скрипты) в документе. Она определяет следующее:

• Какие события генерируются.

• Как они доставляются в обработчики событий.

• Какая информация доступна обработчику события для обработки.

Браузеры Internet Explorer (IE) и Netscape Navigator (NN) определяют различные модели событий для объектной модели документа (Document Object Model - DOM) Браузер IE реализует так называемое всплывание событий (event bubbling), являющееся подходом снизу-вверх, а браузер NN реализует захват событий (event capturing), являющий подходом сверху-вниз.

События генерируются (запускаются - trigger, или даже "зажигаются" - fire) двумя способами - пользователем или системой. Генерируемые пользователем события возникают, когда пользователь взаимодействует с документом путем движения (Move) мыши, щелчка на кнопке мыши (Click) или нажатия клавиши (KeyPress) на клавиатуре. Генерируемые системой события возникают, когда изменяется состояние системы, например возникла ошибка (Error) или закончилась загрузка страницы (Load).

Модель события показывает, при каких контекстах событие можно генерировать и какова цель события в данном контексте. Для генерируемых пользователем событий модель события определяет, какие действия пользователя достоверны для различных элементов документа и какой целевой элемент (target element) документа определяется для события. С системными событиями целевой элемент обычно не ассоциируется и они захватываются обработчиками событий, определяемыми глобальным скриптом на странице.

Доставка события определяет процесс, с помощью которого событие доставляется коду (скрипту), реагирующему на событие. Способ доставки события зависит от типа возникшего события и типа реализованной в браузере модели события.

Традиционно все события имеют целевые элементы (target element) документа, которые определяют код для обработчика события как атрибут элемента документа. Однако более совершенные способы обработки событий требуют, чтобы события обрабатывались элементами документа, отличающимися от целевого элемента. События проходят ("всплывают" - bubble) по иерархической структуре документа и обрабатываются теми элементами страницы, которые наиболее подходят для события.

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

События возникают на конкретных элементах документа, поэтому необходимо ассоциировать обработчик события с конкретным событием и конкретным элементом документа, или объектом, чтобы можно было вызвать обработчик при появлении события на данном элементе. Эта операция называется также привязкой (binding) или подключением (attachment) обработчика события к элементу. Элементы описываются тэгами языка HTML, поэтому при ассоциировании должны обязательно привлекаться тэги документа. Для ассоциирования обработчика события с элементами и происходящими на них событиями применяются следующие, по существу, эквивалентные способы.

1. Определить обработчик события как особенный атрибут тэга, именем которого является название события, а значением JavaScript-код, выполняемый при запуске события. Такой обработчик события часто называется внутренним (буквально "внутристрочным" - inline event handler). Простейшим примером служит кнопка с обработчиком события onClick:

Вот как выглядит определение данной кнопки:

<form>

<input type="button" name="Кнопка" value="Щелкни на мне!" onc^k^'alert^'Ebi щелкнули на кнопке!')">

</form>

Здесь при щелчке на кнопке выводится информационный бокс (alert box), содержащий текст 'Вы щелкнули на кнопке!'

Как обычно, значение атрибута заключается в двойные кавычки, а затем определяются любые операторы JavaScript, разделяемые точкой с запятой. Если в этих операторах потребуются кавычки, придется применять одиночные кавычки.

2. Гораздо удобнее объявить для обработчика события функцию, а с помощью атрибута события в тэге элемента вызвать эту функцию. Вот как выглядит определение функции с именем flip и ассоциирование ее с элементом IMG в качестве обработчика события MouseOver:

<script language="JavaScript"> function flip() {

// Некоторые действия, выполняемые функцией }

</script>

.Содержание документа

<img src="sample.gif" onmouseover="flip()">

Этот пример показывает ассоциирование обработчика события с функцией. Отметим, что после имени функции требуются круглые скобки, а поскольку функция является значением атрибута тэга HTML, ее имя заключается в двойные кавычки.

Функции обработчиков событий допускается объявлять в любом месте документа. Однако обычно объявления всех функций помещаются в секции HEAD документа, потому что при этом функции загружаются первыми и гарантируется доступность функций до окончания загрузки всего документа и возможных действий пользователя, инициирующих различные события. Кроме того, функции обработчиков событий можно вызывать событиями от нескольких элементов, т.е. разделять (share) эти функции. Сами функции могут содержать любой JavaScript-код.

3. Третий способ состоит в объявлении кода обработчика события в тэгах <SCRIPT> и </SCRIPT> и использовании атрибутов FOR и EVENT этого тэга для ассоциирования кода с конкретным событием на конкретном элементе. Для этого потребуется идентифицировать (именовать) нужный элемент с помощью атрибута ID. Следующий пример определяет некоторый JavaScript-код и ассоциирует его как обработчик события MouseOver для элемента IMG, имеющего идентификатор MyImage.

<script for="MyImage" event=onmouseover language="JavaScript">

// Некоторые действия, выполняемые обработчиком события </script>

.Содержание документа

<img id="MyImage" src="sample.gif">

Этот способ ассоциирования события на определенном элементе с обработчиком события поддерживает только броузер Internet Explorer, поэтому он применяется в интрасетях (intranets), т.е. внутренних локальных сетях организаций, компьютеры которых оснащены только этим браузером. В документах World Wide Web этот способ практически не применяется.

4. Последний способ ассоциирования функции с конкретным событием состоит в том, чтобы присвоить ссылку на функцию свойству объекта обработчика события:

<script language="JavaScript"> function myAlert() {

alert("Спасибо за щелчок на кнопке.");

}

</script>

<form name="myForm">

<input type="button" name="myButton" value-'Щелкни здесь">

</form>

<script language="JavaScript"> document.myForm.myButton.onclick=myAlert;

</script>

В этом способе событие Click на кнопке myButton в форме myForm документа будет вызывать функцию myAlert обработчика события.

Общий синтаксис этого способа имеет следующий вид: object.eventhandler = function;

например: window.onload = welcome;

Этот оператор присваивает функцию welcome() обработчику события onLoad окна. Отметим, что обработчик события должен быть написан строчными буквами (onload вместо onLoad), что необходимо для совместимости с броузерами третьего поколения.

Отметим также, что свойство обработчика события должно присваиваться ссылке функции, а не вызову функции. Поэтому нужно присвоить welcome, а не welcome(), так как скобки означают вызов функции, вычисляющий возвращаемые функцией значения.

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

Можно ассоциировать один и тот же обработчик события с несколькими элементами в документе. Этот прием удобен, когда требуется выполнять некоторое действие при появлении события на любом из элементов. Обычно обработчики событий разрабатываются для обработки только одного типа события, но можно создать обработчики, которые могут обрабатывать события нескольких типов.

Не требуется ограничиваться одним обработчиком для каждого типа события. Если действие, которое должно выполняться для данного события в одном элементе, отличается от действия для такого же события в другом элементе, можно определить два обработчика и ассоциировать каждый с его элементом. В общем, допускается определять любое число обработчиков событий для одного и того же типа события и ассоциировать каждый из обработчиков с одним или несколькими элементами документа.

Объект Event

Объект Event поддерживается обоими браузерами. Свойства этого объекта доступны для каждого события, возникающего на каждом объекте в документе. Однако имена свойств в браузерах различаются. Далее мы рассмотрим свойства объекта Event только для броузера Internet Explorer.

Напомним, что объект - это конструкция, обладающая свойствами и методами, которые отражают данные, привязанные к конкретному компоненту. Например, объект document обладает свойствами, которые отражают характеристики открытого документа: его адрес URL, его фоновый цвет, его название (title) и др. Объект также обладает методами, являющимися функциями, которые выполняют конкретную задачу. Например, объект window имеет метод close(), который закрывает окно, и метод open(), который открывает новое окно.

Следовательно, объект Event содержит информацию о событии. А о каком событии? Событии, которое только что произошло! Другими словами, объект Event является снимком деталей, окружающих событие сразу после его возникновения. Можно использовать свойства объекта Event в коде обработчика события для получения подробных сведений о событии, например, где находился указатель мыши в момент события, были ли нажаты некоторые клавиши в момент появления события и т.д.

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