Интерфейс Event в DOM2

5 6 7 8 9 10 11

Интерфейс Event содержит данные о событии, которые можно использовать для его обработки.

Для интерфейса Event определены три числовые константы, определяющие этап обработки события:

· CAPTURING_PHASE (1) – событие находится на этапе захвата;

· AT_TARGET (2) – событие находится на этапе обработки в объекте, в котором произошло событие;

· BUBBLING_PHASE (3) – событие находится на этапе «всплывания».

Для интерфейса Event определены следующие свойства, доступные только для чтения:

· type – содержит строковое значение имени события, например, "click" (аналогично одноименному свойству для объекта event в Internet Explorer);

· target – содержит объект, в котором произошло событие (аналогично свойству srcElement для объекта event в Internet Explorer);

· currentTarget – содержит объект, блок прослушивания которого (см.????) обрабатывает событие;

· eventPhase – содержит значение константы для текущего этапа обработки события;

· bubbles – содержит значение true, если «всплывание» событий разрешено и false – в противном случае (аналогично свойству cancelBubble для объекта event в Internet Explorer);

· cancelable – содержит значение true, если действие события по умолчанию можно отменить и false – в противном случае (аналогично свойству returnValue для объекта event в Internet Explorer);

· timeStamp – содержит время, когда произошло событие (в миллисекундах с 1 января 1970 года) или 0, если время события не удалось определить.

Интерфейс Event также содержит методы: stopPropagation() и preventDefault().

Значение свойства bubbles для разных событий может быть как true (событие может всплывать), так и false (событие не может всплывать). Если событие является всплывающим (значение свойства bubbles равно true), то отменить его всплывание можно с помощью метода stopPropagation(). Метод не имеет параметров и не возвращает значения.

Возможность отмены события по умолчанию является значением свойства cancelable события. Это значение для разных событий может быть как true (действие события по умолчанию можно отменять), так и false (действие события по умолчанию нельзя отменять). Если событие можно отменить (значение свойства cancelable равно true), то отменить его действие по умолчанию можно с помощью метода preventDefault(). Метод не имеет параметров и не возвращает значения.

Во всех Web-браузерах, поддерживающих спецификацию DOM2 Events, для интерфейса Event введено также свойство which (только для чтения), содержащее десятичный код Unicode символа клавиши клавиатуры (при событиях keydown, keypress и keyup). Это свойство аналогично свойству keyCode события event в Internet Explorer.

Пример 4.5.46. Использование свойств и методов события Event:

1. Обработка события для клавиши клавиатуры:

Определение элемента, в котором произошло событие, для примера 4.5.44(2). Изменим функцию-обработчик для этого примера следующим образом:

function clickEvent(evt)

{

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

// Получение элемента, в котором

// обрабатывается событие, в IE

eventElement = window.event.srcElement;

else

// Получение элемента, в котором

// обрабатывается событие, в DOM2

eventElement = evt.target;

// Получение имени элемента

elementName = eventElement.tagName;

// Получение значения атрибута id для элемента

elementId = eventElement.id;

// Вывод имени и значения id

alert("elementName=" + elementName +

"\nelementId=" + elementId);

}

Тогда для элементов тела документа HTML при щелчке по ним мышью будут выведены следующие сообщения:

2. Обработка события для клавиши клавиатуры:

Объявление функции-обработчика для события нажатия клавиши и описание функции обработчика имеют следующий вид:

document.onkeypress = eventKeyPress;

…

function eventKeyPress(evt)

{

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

// Получение кода нажатой клавиши

pressedKeyCode = window.event.keyCode;

else

// Получение кода нажатой клавиши

pressedKeyCode = evt.which;

// Получение символа для клавиши

keySymbol = String.fromCharCode(

parseInt(pressedKeyCode));

// Вывод символа клавиши

alert("Нажата клавиша '" + keySymbol + "'");

}

В теле документа HTML выводится следующий заголовок:

<h4>Нажмите на одну из алфавитно-цифровых<br/>

клавиш клавиатуры</h4>

Пример вывода Web-страницы:

3. Обработка «всплывания» события:

В заголовке Web-страницы заданы следующие функции:

// Обработка события щелчка мышью для элемента p

function pEvent(evt)

{

// Если Web-браузер – Internet Explorer

if (navigator.userAgent.indexOf("MSIE")!= -1)

alert(' pEvent():\nid=' +

window.event.srcElement.id);

else // Если Web-браузер совместим с DOM2

{

alert(' pEvent():\nid=' + evt.target.id +

' currentId=' + evt.currentTarget.id);

}

// Обработка события щелчка мышью для элемента span

function spanEvent(evt)

{

// Если Web-браузер – Internet Explorer

if (navigator.userAgent.indexOf("MSIE")!= -1)

{

// Вывод значения id для свойства srcElement

alert(' spanEvent():\nid=' +

window.event.srcElement.id);

}

else // Если Web-браузер совместим с DOM2

{

// Вывод значений id для свойств

// target и currentTarget

alert(' spanEvent():\nid=' + evt.target.id +

' currentId=' + evt.currentTarget.id);

}

// Задание обработки событий

function addListener()

{

// Если Web-браузер – Internet Explorer

if (navigator.userAgent.indexOf("MSIE")!= -1)

{

// Прикрепление функций-обработчиков событий

document.getElementById(

"p1").attachEvent("onclick", pEvent);

document.getElementById(

"sp1").attachEvent("onclick", spanEvent);

document.getElementById(

"sp2").attachEvent("onclick", spanEvent);

}

else // Если Web-браузер совместим с DOM2

{

// Добавление блоков прослушивания

// для событий

document.getElementById("p1").addEventListener(

"click", pEvent, false);

document.getElementById("sp1").addEventListener(

"click", spanEvent, false);

document.getElementById("sp2").addEventListener(

"click", spanEvent, false);

}

…

.bold {font-weight: bold}

…

…

<p id="p1">Для указания относительного размера шрифта

(по сравнению с размером шрифта родительского текста) можно

использовать значения

<span id="sp1" class="bold">larger</span>

и <span id="sp2" class="bold">smaller</span>.</p>

Если щелкнуть мышью по содержимому одного из элементов span, например, с id="sp1", то в Internet Explorer будет выведено два раза следующее сообщение:

а в совместимых с DOM2 Web-браузерах сообщения будут иметь следующий вид:

И в том, и в другом случае событие будет обработано сначала для элемента span с id="sp1", а затем для его элемента-родителя p c id="p1".

4. Отмена «всплывания» события:

Если примере 4.5.46(3) в функции spanEvent() в фигурные скобки для Internet Explorer вставить предложение

event.cancelBubble = true;,

а в фигурные скобки для Web-браузеров, совместимых с DOM2, вставить предложение

evt.stopPropagation();,

то обработка события в элементе-родителе p c id="p1" выполняться не будет и для Internet Explorer, и для Web-браузеров, совместимых с DOM2, будет выведено только первое из двух сообщений примера 4.5.46(3).

5. Захват события:

Заменим в примере 4.5.46(3) предложение добавления блока прослушивания элемента p c id="p1" в функции addListener() на следующее предложение:

document.getElementById("p1").addEventListener(

"click", pEvent, true);.

В этом случае событие щелчка мышью по одному из элементов span в Web-браузерах, совместимых с DOM2, будет сначала обрабатываться функцией pEvent(), а затем функцией spanEvent(), а сообщения функций alert() будут выведены в следующем порядке:

В Internet Explorer захват событий не реализован (точнее этот захват происходит, если для события потомка не определена обработка события). Поэтому, если в примере 4.5.46(3) в функции addListener() закомментировать предложения прикрепления функций-обработчиков для элементов span, будет выведено следующее сообщение функции alert():

6. Отмена обработки события в узле-потомке при захвате:

Предотвратить обработку события функцией spanEvent() в примере 4.5.46(5) можно, если в функцию pEvent() в фигурные скобки для Web-браузеров, совместимых с DOM2, вставить предложение

evt.stopPropagation();.

В этом случае будет выведено только первое из двух сообщений в примере 4.5.46(5).

7. Отмена обработки события по умолчанию:

По умолчанию обработка события для элемента a заключается в переходе к указанной в атрибуте href гиперссылке.

Следующая последовательность предложений отменяет переход по гиперссылке для элемента a и выводит на экран сообщение "Гиперссылка не функционирует".

function linkClick(evt)

{

// Если Web-браузер – Internet Explorer

if (if (navigator.userAgent.indexOf("MSIE")!= -1))

// Отмена обработки события по умолчанию в IE

window.event.returnValue =false;

else