Advertising:
|
Документ в процессе разработки! Глава 4.12. Обработка событий в Internet Explorer4.12.1. Общее описание4.12.1.1. Основные различия между DOM и Internet ExplorerВ этой главе мы описываем модель обработки событий, принятую в Internet Explorer (далее IE). Она отличается от модели обработки событий в DOM, поэтому начнем с краткого обзора различий между этими двумя моделями.
Теперь рассмотрим перечисленные различия подробно. 4.12.1.2. Жизненный цикл событияДля того, чтобы уяснить модель обработки событий в IE, начнем с описания жизненного цикла события в этом обозревателе. Этот цикл состоит из следующих фаз:
4.12.1.3. Статическое создание обработчиков событийIE предусматривает два статических способа создания обработчиков событий. Во-первых, мы можем использовать стандартный синтаксис HTML 4.0 с использованием атрибутов on…, например: <IMG src="sample.gif" onclick="mouseClick()"> В атрибуте on… мы можем указать любое выражение JavaScript, например: <BUTTON onclick="javascript: alert('Молодец!')">Нажми меня</BUTTON>
Во-вторых, IE поддерживает расширенный синтаксис элемента SCRIPT с использованием следующих нестандартных атрибутов: Атрибуты: event = CDATA (тип событий) for = IDREF (идентификатор элемента) Здесь атрибут for задает идентификатор HTML-элемента, к которому будет присоединен данный обработчик, а атрибут event задает тип событий, которые он должен обрабатывать. В следующем примере создается обработчик щелчка мыши на графическом образе с идентификатором myImage: <SCRIPT for="myImage" event="onclick"> . . . </SCRIPT> . . . <IMG id="myImage" src="sample.gif"> Различие между этими способами создания обработчиков событий состоит в моменте их активизации в процессе загрузки документа. Обработчик событий, созданный первым способом, начинает обрабатывать возникающие события, как только будет создан элемент, в котором он описан атрибутом on…; обработчик событий, созданный вторым способом, начинает работать только после загрузки всего документа. Поскольку в процессе загрузки документа могут генерироваться различные события, такая схема предоставляет нам большую гибкость, чем стандартная модель DOM. 4.12.1.4. Динамическое создание обработчиков событийДля динамического создания обработчиков событий также есть два способа. Во-первых, мы можем присоединить обработчик события к элементу через его DOM-атрибут on…, например: <IMG id="myImage" src="sample.gif">
. . .
<SCRIPT>
document.getElementById("myImage").onclick = "mouseClick()";
</SCRIPT>
Во-вторых, мы можем подключить обработку событий вызовом нестандартного метода attachEvent. 4.12.1.5. Область действия обработчиков событийIE предусматривает различное поведение обработчиков событий в зависимости от того, связаны они с управляющими элементами формы или нет. Если да, то поведение определяется местоположением сценария — внутри или вне элемента FORM. При этом возможны следующие варианты.
4.12.2. Дополнительные методы интерфейса HTMLElementВместо стандартного интерфейса EventTarget элементы HTML в IE имеют следующие нестандартные методы:
Метод attachEventСинтаксис: элемент.attachEvent(type, function) Аргументы: type — выражение типа DOMString function — указатель на функцию Результат: логическое значение Метод attachEvent регистрирует новый обработчик function события type для данного элемента. Он возвращает true, если регистрация прошла успешно, и false в противном случае. Если новый обработчик регистрируется во время обработки события, то он будет активизироваться только следующими событиями. Если для события зарегистрированы несколько обработчиков, то они вызваются в произвольном порядке. В следующем примере создается обработчик нажатия клавиши, который сработает только один раз. <BODY onload="document.getElementById('btn').attachEvent('onclick', hurrah)">
<SCRIPT>
function hurrah() {
alert('Молодец!');
event.srcElement.detachEvent('onclick', hurrah);
}
</SCRIPT>
<BUTTON id="btn">Нажми меня</BUTTON>
Метод detachEventСинтаксис: элемент.detachEvent(type, function) Аргументы: type — выражение типа DOMString function — указатель на функцию Метод detachEvent дерегистрирует обработчик function события type для данного элемента, который был ранее зарегистрирован методом attachEvent. Метод fireEventСинтаксис: элемент.fireEvent(type, evt?) Аргументы: type — выражение типа DOMString evt — выражение типа event Результат: логическое значение Метод fireEvent генерирует событие type для данного элемента. Необязательный аргумент evt должен содержать указатель на объект типа event, содержащий описание генерируемого события. Метод возвращает true, если генерация события прошла успешно, и false в противном случае. Независимо от содержимого аргумента evt четыре его параметра всегда инициализируются следующими значениями:
Пример генерации события (переменная evt здесь на самом деле не нужна и приведена только для того, чтобы показать, как создаются объекты типа event): <BODY onload="init()">
<SCRIPT>
function init() {
document.body.attachEvent('onclick', hurrah);
var evt = document.createEventObject();
document.body.fireEvent('onclick', evt);
}
function hurrah() { alert('Молодец!'); }
</SCRIPT>
Метод releaseCaptureСинтаксис: элемент.releaseCapture() Метод releaseCapture отключает перехват событий мыши, включенный методом setCapture. Метод setCaptureСинтаксис: элемент.setCapture(flag?) Аргументы: flag — логическое выражение Метод setCapture включает перехват всех событий, генерируемых мышью. Если его аргумент flag равен true (принято по умолчанию), то данный элемент будет перехватывать все события мыши в пределах всего документа. Если аргумент равен false, то данный элемент будет перехватывать только события мыши от содержащихся внутри него элементов. Включение перехвата событий мыши запрещает выбор текста и перетаскивание (drag-and-drop) в окне обозревателя. Пример: <BODY onload="document.getElementById('capturer').setCapture()">
<DIV id="capturer" onclick="alert('Молодец!')"></DIV>
<BUTTON>Щелчок на этой кнопке перехватывается элементом DIV.</BUTTON>
4.12.3. События: объект eventВсякий раз, когда генерируется событие, в свойство event объекта window заносятся параметры, описывающие это событие. Кроме того, мы можем создавать свои объекты этого типа вызовом нестандартного метода document.createEventObject(), присваивать их свойствам нужные значения, а затем генерировать события методом fireEvent. Объекты данного типа не имеют методов, но обладают следующими свойствами.
Свойство altKeyСинтаксис: событие.altKey Изменяемое: да Свойство altKey возвращает true, если в момент генерации события была нажата клавиша Alt, и false в противном случае. Свойство altLeftСинтаксис: событие.altLeft Изменяемое: да Свойство altKey возвращает true, если в момент генерации события была нажата левая клавиша Alt, и false в противном случае. Это свойство поддерживается только в Windows NT 4.0 и Windows 2000. Если документ не имеет фокуса, то всегда возвращается false. Свойство bookmarksСинтаксис: событие.bookmarks Изменяемое: нет Свойство bookmarks возвращает коллекцию закладок ADO, связанных со строками, которые изменяются данным событием. Оно формируется только событиями, связанными с изменением данных. Свойство boundElementsСинтаксис: событие.boundElements Изменяемое: нет Свойство boundElements возвращает коллекцию всех элементов страницы, связанных с набором данных. Оно формируется только событиями, связанными с изменением данных. Свойство buttonСинтаксис: событие.button Изменяемое: нет Свойство button возвращает номер нажатой кнопки мыши. При этом 0 означает, что ни одна кнопка не нажата, 1 означает левую кнопку, 2 — среднюю кнопку, 4 — правую кнопку. Если нажаты две или три кнопки одновременно, то соответствующие значения суммируются. Свойство cancelBubbleСинтаксис: событие.cancelBubble Изменяемое: да Свойство cancelBubble по умолчанию равно false. Установка его в true прекращает просачивание данного события. Иными словами, обработчик события предка данного элемента в иерархии документа не будет вызван. В следующем примере щелчок мышью на картинке вызовет вывод на экран имени графического файла (в обработчике события элемента BODY). Однако, щелчок при нажатой клавише Shift никаких действий не вызывает, поскольку обработчик события элемента IMG в этом случае запрещает распространение события вверх. <SCRIPT>
function checkCancel() {
if (event.shiftKey)
event.cancelBubble = true;
}
function showSrc() {
if (event.srcElement.tagName == "IMG")
alert(event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" src="sample.gif">
Свойство clientXСинтаксис: событие.clientX Изменяемое: да Свойство clientX возвращает горизонтальную позицию курсора мыши относительно клиентской области обозревателя в пикселях. Свойство clientYСинтаксис: событие.clientY Изменяемое: да Свойство clientY возвращает вертикальную позицию курсора мыши относительно клиентской области обозревателя в пикселях. Свойство contentOverflowСинтаксис: событие.contentOverflow Изменяемое: да Это свойство имеет смысл только для события onlayoutcomplete в шаблонах печати. Оно равно false, если все содержимое документа сгенерировано для печати, и true в противном случае. Свойство ctrlKeyСинтаксис: событие.ctrlKey Изменяемое: да Свойство ctrlKey возвращает true, если в момент генерации события была нажата клавиша Ctrl, и false в противном случае. Свойство ctrlLeftСинтаксис: событие.ctrlLeft Изменяемое: да Свойство ctrlKey возвращает true, если в момент генерации события была нажата левая клавиша Ctrl, и false в противном случае. Это свойство поддерживается только в Windows NT 4.0 и Windows 2000. Если документ не имеет фокуса, то всегда возвращается false. Свойство dataFldСинтаксис: событие.dataFld Изменяемое: да Это свойство имеет смысл только для события oncellchange. Его значением является строка, принимающая или задающая столбец данных в текущем наборе записей. Свойство dataTransferСинтаксис: событие.dataTransfer Изменяемое: да Значением этого свойства является объект, который обеспечивает доступ к форматам системного буфера сохранения (clipboard) при операциях перетаскивания (drag-and-drop). Он имеет два свойства, доступных для чтения и записи:
Кроме того, данный объект имеет три метода (см. список форматов буфера сохранения в описании объекта clipboardData):
Пример перетаскивания объекта с использованием dataTransfer: <HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=koi8-r">
<SCRIPT>
// Сообщаем источнику, что объект нужно передать как URL.
function initDrag() {
event.dataTransfer.setData("URL", src.href);
}
// Сообщаем приемнику, что объект нужно принять как URL.
function finishDrag() {
dst.innerText = event.dataTransfer.getData("URL");
}
</SCRIPT>
</HEAD>
<BODY>
<A id=src href="about:текст_ссылки" onclick="return(false)"
ondragstart="initDrag()">Тестовая ссылка</A>
<P id=dst ondragenter="finishDrag()">Бросьте ссылку сюда</P>
</BODY>
</HTML>
Свойство fromElementСинтаксис: событие.fromElement Изменяемое: да Это свойство имеет смысл только для событий onmouseover и onmouseout. Его значением является указатель на объект, который покинул курсор мыши в момент генерации события. Следующий пример выводит сообщение при попадании курсора мыши на заданный абзац. <SCRIPT>
function testMouse(obj) {
if (!obj.contains(event.fromElement)) alert("Приехали!");
}
</SCRIPT>
<P onmouseover="testMouse(this)">Наведите мышку.</P>
Свойство keyCodeСинтаксис: событие.keyCode Изменяемое: да Это свойство имеет смысл только для событий onkeydown, onkeyup и onkeypress. Его значением является виртуальный код клавиши, нажатие или отпускание которой вызвало данное событие. Для остальных событий это свойство равно нулю. Свойство nextPageСинтаксис: событие.nextPage Изменяемое: нет Это свойство имеет смысл только для шаблонов печати. Оно может принимать три значения: "left" (левая страница при двусторонней печати), "right" (правая страница при двусторонней печати) и "" (директива @page не задана). Свойство offsetXСинтаксис: событие.offsetX Изменяемое: да Свойство offsetX возвращает горизонтальную позицию курсора мыши относительно цели события в пикселях. Свойство offsetYСинтаксис: событие.offsetY Изменяемое: да Свойство offsetY возвращает вертикальную позицию курсора мыши относительно цели события в пикселях. Свойство propertyNameСинтаксис: событие.propertyName Изменяемое: да Свойство propertyName имеет смысл только для события onpropertychange. В этом случае оно содержит имя свойства, изменение которого породило данное событие. Пример:
<INPUT type="button" id="btn"
value="Щелкните, чтобы изменить свойство VALUE этой кнопки."
onclick='btn.value = "Новое значение VALUE этой кнопки."'
onpropertychange='alert("Значение свойства " + event.propertyName + " изменено.")'>
Свойство qualifierСинтаксис: событие.qualifier Изменяемое: да Свойство qualifier возвращает имя элемента данных в источнике данных, указанное в атрибуте datasrc элемента, связанного с источником данных. Оно формируется только событиями, связанными с передачей данных. Свойство reasonСинтаксис: событие.reason Изменяемое: да Свойство reason возвращает код результата обмена даными с источником данных: 0 - обмен завершился успешно, 1 - обмен был прерван, 2 - обмен завершился из-за ошибки. Оно формируется только событиями, связанными с передачей данных. Свойство recordsetСинтаксис: событие.recordset Изменяемое: да Свойство recordset задает или возвращает объект, который является текущим набором записей в источнике данных. Оно формируется только событиями, связанными с передачей данных. Свойство repeatСинтаксис: событие.repeat Изменяемое: да Это свойство имеет смысл только для события onkeydown. Оно равно true до тех пор, пока пользователь держит клавишу нажатой, и сбрасывается в false при отпускании клавиши. Свойство returnValueСинтаксис: событие.returnValue Изменяемое: да Свойство returnValue по умолчанию равно true. Сброс его в false запрещает типовую обработку данного события, принятую по умолчанию. В следующем примере щелчок мыши на ссылке выводит адрес этой ссылки вместо перехода по ней (действие, принятое по умолчанию). <SCRIPT>
function showLink() {
if (event.srcElement.tagName == "A") {
event.returnValue = false;
alert(event.srcElement.href);
}
}
</SCRIPT>
<A onclick="showLink()" href="http://wdh.suncloud.ru/">WDH</A>
Свойство screenXСинтаксис: событие.screenX Изменяемое: да Свойство screenX возвращает горизонтальную позицию курсора мыши относительно экрана. Свойство screenYСинтаксис: событие.screenY Изменяемое: да Свойство screenY возвращает вертикальную позицию курсора мыши относительно экрана. Свойство shiftKeyСинтаксис: событие.shiftKey Изменяемое: да Свойство shiftKey возвращает true, если в момент генерации события была нажата клавиша Shift, и false в противном случае. Свойство shiftLeftСинтаксис: событие.shiftLeft Изменяемое: да Свойство shiftKey возвращает true, если в момент генерации события была нажата левая клавиша Shift, и false в противном случае. Это свойство поддерживается только в Windows NT 4.0 и Windows 2000. Если документ не имеет фокуса, то всегда возвращается false. Свойство srcElementСинтаксис: событие.srcElement Изменяемое: да Свойство srcElement возвращает или задает цель события, т. е. указатель на элемент, сгенерировавший данное событие. В следующем примере щелчок мыши на любом элементе приведет к выводу на экран имени тега этого элемента: <BODY onclick="alert(event.srcElement.tagName)"> . . . </BODY> Свойство srcFilterСинтаксис: событие.srcFilter Изменяемое: да Свойство srcFilter возвращает или задает указатель на фильтр, сгенерировавший данное событие. Оно имеет смысл только для события onfilterchange. Свойство srcUrnСинтаксис: событие.srcUrn Изменяемое: да Свойство srcUrn возвращает или задает имя ресурса (URN) для реакции (behavior), сгенерировавший данное событие. Оно не равно null только в том случае, когда цель события имеет присоединенную реакцию, эта реакция имеет URN и именно она породила данное событие. Свойство toElementСинтаксис: событие.toElement Изменяемое: да Это свойство имеет смысл только для событий onmouseover и onmouseout. Его значением является указатель на объект, на который попал курсор мыши в момент генерации события. Следующий пример выводит сообщение при попадании курсора мыши на заданный абзац. <SCRIPT>
function testMouse(obj) {
if (obj.contains(event.toElement)) alert("Приехали!");
}
</SCRIPT>
<P onmouseover="testMouse(this)">Наведите мышку.</P>
Свойство typeСинтаксис: событие.type Изменяемое: да Свойство type возвращает или задает тип данного события. Тип события — это имя события без префикса on, например для события onclick эта строка равна "click". Свойство xСинтаксис: событие.x Изменяемое: да Свойство x возвращает горизонтальную позицию курсора мыши относительно отца цели события в пикселях. Если мышь находилась за пределами окна в момент генерации события, то это свойство равно -1. Если цель события абсолютно позиционирована и не является потомком абсолютно позиционированного элемента или событие сгенерировано мышью, то возвращается позиция курсора мыши относительно элемента BODY. Свойство yСинтаксис: событие.y Изменяемое: да Свойство y возвращает вертикальную позицию курсора мыши относительно отца цели события в пикселях. Если мышь находилась за пределами окна в момент генерации события, то это свойство равно -1. Если цель события абсолютно позиционирована и не является потомком абсолютно позиционированного элемента или событие сгенерировано мышью, то возвращается позиция курсора мыши относительно элемента BODY. 4.12.4. Классификация событийInternet Explorer поддерживает богатый набор разнообразных нестандартных событий. Ниже приводится полный перечень событий, генерируемых этим обозревателем, разбитый на функциональные группы. 4.12.4.1. События пользовательского интерфейса
4.12.4.2. События мыши
4.12.4.3. События клавиатуры
4.12.4.4. События изменения документа
4.12.4.5. События HTML
4.12.4.6. События элемента MARQUEEInternet Explorer поддерживает нестандартный элемент MARQUEE (бегущая строка текста). С этим элементом связаны три события, которые могут генерироваться только им.
4.12.4.7. События буфера сохраненияПеречисленные ниже события генерируются при обмене данными между документом и системным буфером сохранения. Пример работы с буфером сохранения см. в описании объекта window.clipboardData.
4.12.4.8. События перетаскиванияПеречисленные ниже события генерируются при перетаскивании (drag-and-drop) объектов. 4.12.4.9. События печати4.12.4.10. События передачи данныхПеречисленные ниже события генерируются элементами документа, связанными с внешним источником данных. |
HIVE: All information for read only. Please respect copyright! |
Advertising: |
|
|
|
|