Пиши Дома Нужные Работы

Обратная связь

Обработка событий в MS Internet Explorer

Обработчики событий

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

В JavaScript подобная интерактивность реализована, как и в других системах программирования, возможностью перехвата и обработки событий, возникающих в результате действий пользователя или системы. Для этого в теги практически всех элементов HTML (объектов с точки зрения JavaScript) были введены атрибуты обработки событий, задающие действия, выполняемые при возникновении события, связанного с этим элементом HTML. Имя атрибута обработки события начинается с приставки on, за которым следует название события. Если событием является, например, щелчок кнопкой мыши click, то соответствующий атрибут обработки этого события называется xnclick; если обрабатываемым событием является нажатие кнопки мыши mousedown, то атрибут называется xnmousedown.

Информация о некоторых событиях некоторых элементов HTML приведена в следующей таблице.

Событие Применяется к объектам Когда происходит событие
abort image Пользователь отказывается от загрузки изображения
blur window, body и все объекты формы Потеря объектом фокуса
change text, textarea, select Пользователь изменяет значение элемента
click Все элементы HTML Щелчок на элементе HTML
error image, window Загрузка документа или изображения вызывает ошибку
focus window, body и все объекты формы Окно или элемент формы получает фокус
keydown Все элементы HTML Пользователь нажимает клавишу клавиатуры
keypress Все элементы HTML Пользователь удерживает нажатой клавишу клавиатуры
keyup Все элементы HTML Пользователь отпускает клавишу клавиатуры
load Тело документа Загружается документ в браузер
mousedown Все элементы HTML Пользователь нажимает кнопку мыши
mousemove Все элементы HTML Пользователь перемещает указатель мыши в области элемента
mouseout Все элементы HTML Пользователь перемещает указатель мыши из области элемента
mouseover Все элементы HTML Пользователь перемещает указатель в область элемента
mouseup Все элементы HTML Пользователь отпускает кнопку мыши
mousewheel Все элементы HTML Пользователь крутит колесико мыши
move Относительно или абсолютно позиционированный элемент Пользователь или сценарий перемещает элемент
reset form Пользователь нажимает кнопку Reset формы
select body, text, textarea Пользователь выбирает поле ввода элемента формы или выделяет часть документа
submit form Пользователь нажимает кнопку Submit формы
unload body, frameset, window Пользователь закрывает документ

 



Хорошим стилем программирования является оформление действий, выполняемых при обработке событий, в виде процедур.

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

В 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:

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

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

Любое событие имеет свой "жизненный" цикл: от момента возникновения действия или условия, являющегося причиной генерирования события, до выполнения последнего оператора обработчика события или финальных действий браузера. Цикл жизни любого типичного события 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 - она оперирует с объектами в полном соответствии с традиционными объектно-ориентированными технологиями: все элементы документа представляются в виде объектов. В узлах структурной логической схемы находятся объекты, а не данные, со всеми присущими объектам свойствами и поведением.

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

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

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

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

Узлы объектной модели DOM

Объектная модель документа представляется узлами (node), расположенными в виде иерархической структуры дерева. Концепция объектной модели не привязана ни к какому конкретному представлению документа (HTML, XML, SGML). Она всего лишь описывает логическую организацию документа. Ее реализация в конкретной системе представления документов ставит в соответствие узлам реальные элементы. В объектной модели документа, реализованной для HTML, в узлах могут находиться любые элементы HTML или текст, называемые узловыми элементами.

Узлы в модели DOM документа HTML могут быть следующих типов:

Тип Что представляет
Элемент HTML
Текстовое содержимое тега HTML
Комментарий HTML
Корневой элемент иерархической структуры
Фрагмент документа

 

Простейший документ HTML, состоящий из пустых элементов HEAD и BODY в объектной модели DOM будет представлен деревом, показанном на рисунке:

Рис. 1.

Во главе иерархии находится элемент типа 9 с именем #document, который порождает узел HTML, от которого уже и происходят узлы HEAD и BODY (все типа 1).

Текстовое содержимое элемента HTML хранится в специальном текстовом узле (тип 3) с именем #text, порождаемом узлом элемента. Причем текстовых узлов может быть несколько, если содержимое элемента представлено размеченным текстом HTML. Эти-то вложенные элементы HTML и разбивают текстовое содержимое элемента на ряд текстовых узлов.

Например, рассмотрим следующий фрагмент документа HTML:

<P>Это <B>содержимое</B> абзаца <I>документа</I> HTML</P>

В объектной модели DOM он будет представлен следующим иерархическим деревом:

Рис. 2.

На рисунке в текстовых узлах также представлено их содержимое. В DOM HTML содержимое, получаемое с помощью свойства nodeValue узла может быть только у текстовых узлов и узлов комментария (свойство nodeName равно #comment), являющихся листьями иерархического дерева объектов документа.






ТОП 5 статей:
Экономическая сущность инвестиций - Экономическая сущность инвестиций – долгосрочные вложения экономических ресурсов сроком более 1 года для получения прибыли путем...
Тема: Федеральный закон от 26.07.2006 N 135-ФЗ - На основании изучения ФЗ № 135, дайте максимально короткое определение следующих понятий с указанием статей и пунктов закона...
Сущность, функции и виды управления в телекоммуникациях - Цели достигаются с помощью различных принципов, функций и методов социально-экономического менеджмента...
Схема построения базисных индексов - Индекс (лат. INDEX – указатель, показатель) - относительная величина, показывающая, во сколько раз уровень изучаемого явления...
Тема 11. Международное космическое право - Правовой режим космического пространства и небесных тел. Принципы деятельности государств по исследованию...



©2015- 2024 pdnr.ru Все права принадлежат авторам размещенных материалов.