|
|
Обработка событий в MS Internet ExplorerОбработчики событий Интерактивные страницы HTML реагируют на действия пользователя. Например, при нажатии на кнопку появляется диалоговое окно с сообщением, или выполняется проверка правильности введенных пользователем данных в полях формы. В JavaScript подобная интерактивность реализована, как и в других системах программирования, возможностью перехвата и обработки событий, возникающих в результате действий пользователя или системы. Для этого в теги практически всех элементов HTML (объектов с точки зрения JavaScript) были введены атрибуты обработки событий, задающие действия, выполняемые при возникновении события, связанного с этим элементом HTML. Имя атрибута обработки события начинается с приставки on, за которым следует название события. Если событием является, например, щелчок кнопкой мыши click, то соответствующий атрибут обработки этого события называется xnclick; если обрабатываемым событием является нажатие кнопки мыши mousedown, то атрибут называется xnmousedown. Информация о некоторых событиях некоторых элементов HTML приведена в следующей таблице.
Хорошим стилем программирования является оформление действий, выполняемых при обработке событий, в виде процедур. Вызов процедуры обработки события В 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. Выполняются заключительные действия по умолчанию, если таковые определены, но при условии, что событие не было аннулировано.
Объект event (IE)
Часть 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, состоящий из пустых элементов HEAD и BODY в объектной модели DOM будет представлен деревом, показанном на рисунке:
Во главе иерархии находится элемент типа 9 с именем #document, который порождает узел HTML, от которого уже и происходят узлы HEAD и BODY (все типа 1). Текстовое содержимое элемента HTML хранится в специальном текстовом узле (тип 3) с именем #text, порождаемом узлом элемента. Причем текстовых узлов может быть несколько, если содержимое элемента представлено размеченным текстом HTML. Эти-то вложенные элементы HTML и разбивают текстовое содержимое элемента на ряд текстовых узлов. Например, рассмотрим следующий фрагмент документа HTML: <P>Это <B>содержимое</B> абзаца <I>документа</I> HTML</P>В объектной модели DOM он будет представлен следующим иерархическим деревом:
На рисунке в текстовых узлах также представлено их содержимое. В DOM HTML содержимое, получаемое с помощью свойства nodeValue узла может быть только у текстовых узлов и узлов комментария (свойство nodeName равно #comment), являющихся листьями иерархического дерева объектов документа. |
|
