Основные различия между dom и ie
Модель обработки событий, принятая в IE, отличается от модели обработки событий в DOM:
Просачивание событий и отмена типовой обработки события в IE имеют тот же смысл, что в DOM, но реализованы другими свойствами и методами. Механизм перехвата событий реализован только для событий, генерируемых мышью (setCapture и releaseCapture).
Интерфейс EventTarget узлами документа в IE не поддерживается. Вместо него есть нестандартные методы attachEvent, detachEvent и fireEvent.
В IE поддерживается нестандартный синтаксис создания обработчиков событий с помощью атрибутов for и event в теге SCRIPT.
Если в DOM объект event передается обработчику события как аргумент вызова (и, соответственно, недоступен вне тела этого обработчика), то в IE объект event является свойством объекта window, которое инициализируется всякий раз, когда генерируется событие. Поэтому этот объект является глобальным и указывать его в списке аргументов обработчика событий не обязательно. Кроме того, объекты event в DOM и IE различны по набору своих свойств и методов.
Набор событий, генерируемых в IE, отличается от набора, предусмотренного в DOM.
Жизненный цикл события в ie
Жизненный цикл события в IE состоит из следующих фаз:
Выполняется действие пользователя или иное условие, порождающее событие.
Создается объект window.event, в который заносятся свойства сгенерированного события.
Объектная модель документа оповещается о том, что произошло новое событие. Для этого вызывается обработчик данного события того элемента дерева документа, в котором это событие произошло.
Обработчик выполняет указанные в нем действия и завершает работу. После этого событие просачивается в обработчик событий его отца в дереве документа и т.д. до тех пор, пока не будет достигнут объект window или пока какой-нибудь из обработчиков в этой цепочке не прервет просачивание.
Если событие имеет типовую обработку, и она не была отменена предшествующими обработчиками, то выполняется типовая обработка события.
Задание 1.
Создайте два различных обработчика для одного события и одного и того же узла (по DOM 2).
Проверьте, что эта конструкция работает в браузерах Netscape (версии 6 или 7) и в IE (версии 5 и выше).
Создание своего обработчика событий
Есть несколько способов установки своего обработчика события. Основной (использующий стандартный синтаксис HTML) способ - это размещение обработчика в самом тэге элемента:
<ИМЯ_ТЭГА onимя_события=текст_скрипта>
Если в документе используется несколько скриптовых языков, то перед текстом скрипта надо указывать название языка, на котором написан данный обработчик:
<... onимя_события="javascript:текст скрипта" ...>
ЗАДАНИЕ 2.
Создайте документ, в котором будут обработчики событий на JScript и на VBScript.
Про второй способ также можно сказать, что он использует стандартный синтаксис для тэга SCRIPT:
<SCRIPT FOR=имя_элемента EVENT=onимя_события>...</SCRIPT>
В последнее время это не очень популярный, но всё же вполне приемлемый (а иногда даже наиболее предпочтительный) способ установки обработчика.
ЗАДАНИЕ 3.
Установить обработчик события stop (для объекта document). Объяснить, зачем он может использоваться, и какой способ его установки является наилучшим.
Не следует забывать и о старинном методе привязки обработчиков к элементам и событиям через специальные имена процедур - имяЭлемента_onИмяСобытия. Этот способ работает в VBScript, а в PerlScript он является единственно возможным.
ЗАДАНИЕ 4.
Создать документ с обработчиками событий на PerlScript. Обратите внимание, что в качестве имени элемента следует использовать атрибут name (сравните с VBScript).
Есть и динамический способ установки и замены обработчиков событий:
объект.onимя_события=функция;
Под функцией понимается объект Function в JScript или указатель на функцию, возвращаемый встроенной функцией GetRef("имя_функции") в VBScript. Может показаться странным, но при преобразовании в строковый тип (например, для вывода сообщения) объект Function в JScript возвращает текст функции. Можно "положить" объект Function в переменную, а потом вызвать эту функцию, написав имя переменной и поставив после него скобки:
var oFun=new Function("n","alert(Math.pow(2,n))");
oFun(10);
ЗАДАНИЕ 5.
Написать динамическую установку обработчика события для элемента, у которого уже был установлен обработчик этого же события. После выполнения "динамического" обработчика должен выполняться "старый" обработчик.
ЗАДАНИЕ 6.
Максимально подробно "проследить" всплывание события с имиджа в ячейке таблицы.
ЗАДАНИЕ 7.
Найти способ задания статусного сообщение при наведении на тэг A со скриптом в качестве адреса (<A HREF=javascript:alert("OK")>...</A>).
События, связанные с работой браузера
Работа браузера начинается с загрузки и разбора документа. После разбора начинается отображение. В статическом документе на этом всё и заканчивается, а в динамическом мы можем не только продолжить общение с пользователем, но и принять участие в работе (правильнее, конечно, сказать в организации работы) самого браузера с самого начала. У каждого элемента есть состояния - свойство readyState. Есть событие, которое генерируется при каждом изменении этого состояния - readystatechange. Со старых времён у некоторых элементов сохранилось событие load (onload). У анимированных GIF-файлов с повторами это событие генерируется при каждом начале цикла.
ЗАДАНИЕ 8.
При нажатии Esc (или кнопку Cancel) обработчик по умолчанию останавливает GIF-анимацию. Защититься от этого.
Элементы документа появляются и становятся доступными по мере загрузки и разбора документа.
ЗАДАНИЕ 9.
Максимально подробно "проследить" процесс загрузки документа и появления его элементов.
ЗАДАНИЕ 10.
Организовать строго последовательную загрузку тяжёлых имиджей и возможность остановки.
События, связанные с действиями пользователя
Помимо классических действий пользователя (мышь, клавиатура) в IE обрабатываются выделения и перетаскивания (drag'n'drop):
ЗАДАНИЕ 11.
Найти способ запретить правую кнопку мыши, выделения и перетаскивания.
Если пользователь редактирует тактовое поле, то мы можем узнавать о каждом изменений, которое он вносит.
ЗАДАНИЕ 12.
Создать текстовое поле, в которое будут вводиться только цифры и знак минус (впереди).
Контролируется даже попытка копирования в буфер обмена (и есть возможность немного изменять то, что туда помещается).
ЗАДАНИЕ 13.
Написать "корректировщик" для операций копирования (Ctrl+C) - к каждому копируемому со страницы фрагменту текста он должен приписывать копирайт.
Одно из любимейших занятий всех пользователей - изменение размеров окна браузера. Естественно, расположение элементов на странице и их размеры надо при этом либо менять, либо стараться не менять, в зависимости от замысла дизайнера. Один из способов решения такой задачи было предложено реализовать в ЗАДАНИИ 12 второй лекции.
ЗАДАНИЕ 14.
Выполнить ЗАДАНИЕ 12 из второй лекции с помощью обработчиков событий (resize и ?).
Печать, хоть и была всегда головной болью для администраторов, является важнейшей потребностью пользователей, которую надо удовлетворять по возможности качественно. Для этой цели предусмотрены стилевая директива @media print и события beforeprint и afterprint.
ЗАДАНИЕ 15.
Создать документ, который на экране и на бумаге выглядит совершенно по-разному.
Немаловажно, что даже выход пользователя из "документа" тщательно отслеживается. Перед тем, как документ окончательно выгрузится, мы можем успеть сохранить некоторую информацию в куках, или, как это часто делают в рекламных целях, открыть новое окно с красивой картинкой.
ЗАДАНИЕ 16.
Создать скрипт (внешний, подключаемый к любому документу), который подсчитывает и сохраняет (накапливает) в куках время, которое пользователь провёл на данной странице.
События, связанные со временем
С обработкой времени мы познакомились (setTimeout, setInterval) на первом занятии. Более сложная событийная модель требует использования компонент (встроенные бихейворы time и time2), с которыми мы познакомимся в четвёртой лекции.