Вызов процедуры обработки события

В JavaScript каждое событие порождает ассоциированный с ним объект event. Этот объект содержит всю информацию о событии и его можно передать процедуре обработки события.

Вызов процедуры обработки события можно осуществить двумя способами:

· явно - назначив ссылку на процедуру обработки события в соответствующем свойстве объекта

· неявно - в атрибуте обработки события тега соответствующего элемента

Каждый объект JavaScript, создаваемый для элементов документа HTML, имеет свойства, ассоциированные с возможными событиями, которые могут быть сгенерированы для этого элемента. Присвоив этому свойству в качестве значения ссылку на процедуру обработки события, мы и определим процедуру, которая будет вызываться при возникновении соответствующего события. Например, следующий код определяет процедуру showEventType как процедуру обработки события mousedown кнопки формы:

<FORM NAME="form1"><INPUT TYPE="button" NAME="button1" VALUE="Узнай событие"><SCRIPT> document.form1.button.xnmousedown = showEventType</SCRIPT></FORM>

Сама процедура задается следующим кодом (объект event в IE доступен просто по своему имени):

// В IEfunction showEventType() { alert("Произошло событие: " + event.type)}

Второй, неявный вызов процедуры обработки события требует задания обращения к ней в атрибуте xnmousedown в открывающем теге элемента INPUT:

Событийная модель

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

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

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

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

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

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

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

Пример 1. "Всплытие" события

В этом примере щелчок на любом элементе HTML страницы приводит к отображению диалогового окна с надписью "Не надо щелкать". <HTML><HEAD><TITLE>"Всплытие" события</TITLE></HEAD><BODY ID='body' xnclick="alert('Не надо щелкать!');" ><H1 ID='head1'>Привет!</H1><P ID='parag1'>Это простой пример, <B ID='bold1'>ну очень простой</B> пример.</BODY></HTML> Возникнув, событие начинает подниматься вверх по иерархии вложенных объектов HTML. Например, если щелчок произошел на элементе bold1, то путь "всплытия" события будет bold1, parag1 и body. Причем для каждого из указанных элементов JavaScript будет просматривать наличие атрибута xnclick и выполнять действия, предопределенные его значением. В нашем случае такой атрибут задан только для родителя body, а поэтому только заданный в нем код и будет выполняться при щелчке на любом элементе или просто в теле документа.

Пример 2. Аннулирование "всплытия" события

Аннулирование "всплытия" события в элементе bold1 приводит к тому, что щелчок на нем не отображает диалогового окна из обработчика этого события в элементе body. Для всех остальных элементов это действие продолжает выполняться. <HTML><HEAD><TITLE>Аннулирование события</TITLE></HEAD><BODY ID='body' xnclick="alert('Не надо щелкать!');" ><H1 ID='head1'>Привет!</H1><P ID='parag1'>Это простой пример,<B ID='bold1' xnclick="window.event.cancelBubble=true" >ну очень простой</B> пример.</BODY></HTML>

Объект event (IE)

Пример 3. Отмена перехода по гиперсвязи

document.xnclick=click;function click() { if((window.event.srcElement.tagName=='A') && window.event.shiftKey) { window.event.returnValue=false; }}

Пример 4. Изменение размеров картинки

Свойство каскадных таблиц стилей zoom (расширение компании Microsoft к свойствам каскадных таблиц стилей, вошедших в рекомендации консорциума WWW) позволяет изменять масштаб отображения элемента HTML на странице, отображаемой в окне браузера. Его значением является коэффициент изменения размера элемента HTML по сравнению с его нормальным размером. Он задается в виде вещественного числа или в виде процента. Значения от нуля до единицы или от 0% до 100% приводят к уменьшению изображения элемента, а значения большие единицы или 100% к увеличению. В примере отслеживается поворот колесика мыши, когда указатель расположен над рисунком (элемент IMG), и увеличение (поворот колесика "на себя") или уменьшение (поворот колесика "от себя") значения свойства zoom элемента IMG на 5%, что приводит к увеличению или уменьшению размеров рисунка. <HTML><HEAD><SCRIPT>var count = 100;function picture(){ if (event.wheelDelta <= -120) count += 5; else if (event.wheelDelta >= 120) count -= count <= 10 ? 0 : 5; event.srcElement.style.zoom = count + "%"; window.status= event.srcElement.style.zoom;}</SCRIPT></HEAD><BODY><img src="sample.jpg" onmousewheel="picture()" width="100"></BODY></HTML>

Упражнение 1.
Написать сценарий, который считывает вводимый с клавиатуры символ (событие `xnkeydown` связать с однострочным текстовым полем) и в многострочном текстовом поле `TEXTAREA` отображает в новой строке его код.

Упражнение 2.
Разработать сценарий, который позволяет в текстовое поле вводить только десятичные цифры; только восьмеричные; только шестнадцатеричные.

Упражнение 3.
Написать сценарий, который при перемещении указателя мыши по странице каждый раз при переходе на новый элемент HTML отображал бы диалоговое окно с сообщением о том, какой элемент HTML только что был покинут.

Упражнение 4.
Написать сценарий, отслеживающий, какая кнопка мыши была нажата и в области какого элемента HTML (название его тега) находился в этот момент указатель мыши.

Часть 3

Объектная модель документа DOM

Объектная модель, реализованная в Internet Explorer 5.0, полностью соответствует рекомендациям REC-DOM-Level-1-19981001 Консорциума WWW. В ней, как и в модели DHTML, документ представляется в виде логической древовидной структуры, но она предоставляет программисту большие удобства при работе с иерархической структурой объектов документа, чем объектная модель DHTML, позволяя:

· Перемещать часть структуры документа в другое место, не разрушая и не создавая ее заново

· Создавать новые элементы и присоединять их к структуре документа в любом ее месте

· Организовывать и манипулировать новыми или существующими ветвями структуры фрагмента документа до помещения объектов в структурное дерево документа

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

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

Объектная модель документов, таким образом, как объектная модель, определяет:

· интерфейсы и объекты, используемые для представления документа и манипулирования с ним;

· семантику (смысл) этих интерфейсов и объектов, включая и поведение, и атрибуты;

· "родственные" связи и взаимодействие между этими интерфейсами и объектами.

<12 13 141516 17 18 >

Дата добавления: 2016-02-11; просмотров: 834;