В броузерах IE4+ и NN4+ любое действие пользователя или системы передаётся обработчику событий, описанному в виде атрибута внутри дескрипторов HTML. Например, когда пользователь щёлкает мышкой на элементе, событие щелчка запускает обработчик события onClick, который, в свою очередь, запускает функцию или выполняет выражение. То есть, само событие ничего не делает. Оно или происходит, или нет. Событие и связанное с событием действие (намример, нажатие клавиши-модификатора в момент запуска события) - это не одно и то же (хотя до NN 4 это было и так).

Сохраняя обратную совместимость со старыми версиями, броузеры 4 версии поддерживают первую модель событий, где каждому событию соответствует объект определённого класса, и когда происходит событие, Свойства этого события получают всю информацию о нём. Новшество модели событий 4 поколения броузеров состоит в передаче событий. Это делает возможным обработку одного события несколькими объектами. То, что обрабатываемое событие содержит информацию о целевом объекте и другие полезные данные, гарантирует высокую интеллектуальность функции, которые могут обрабатывать событие не ссылаясь на дополнительные источники информации.

На сегодняшний день существует 3 модели событий:

1. Модель NN4, значимость которой с каждым днём уменьшается, поскольку пользователи переходят на более новые версии броузеров.
2. Модель IE4+, существующая в JScript
3. Стандартизированная модель W3C, используемая в броузере NN6

Создавать графический пользовательский интерфейс гораздо труднее, чем старомодный интерфейс с использованием командной строки. При использовании командной строки или системы управляющих меню наборов действий, которые могут выполняться в любой момент времени, весьма ограничен. Это очень удобно в программировании, поскольку позволяет направлять пользователя по пути, ограниченному структурой программы.

Совсем другой подход применяется при создании графических пользовательских интерфейсов, например, как в операционных системах Windows, MacOS, XWindow System и других, начиная с первой графической системы XeroxStar. Задача программиста при создании действительно удобного графического интерфейса - дать пользователю возможность выполнять любое действие в любой момент времени: перемещать мышь, вводить команды с клавиатуры, выделять текст, выбирать опции в выпадающем меню и прочее. Для этого программа (или, точнее говоря, операционная система) должна отслеживать любые действия устройств ввода (мышь, клавиатура) и сигналы, поступающие из сети.

Таким образом операционная система регистрирует все события, как вызванные действиями пользователя, так и работой активных программ. Впоследствии система или текущая программа следит, как протекает каждое событие. Для этого события должны содержать определённую информацию о себе: как и в какой области происходит событие.

Несмотря на большое разнообразие объектов событий существует всего три модели событий. Согласно первой объект события создаётся в тот момент, когда происходит событие. Когда объект создан, броузер присваивает значения свойствам события. Свойства отражают многочисленные характеристики данного события (координата указателя, какая кнопка была нажата, нажата ли клавиша-модификатор и пр.). Чтобы облегчить задачу обработчику событий, броузер сам производит все вычисления и определяет, на каком элементе произошло событие. Таким образом, одно из свойств события содержит ссылку на исходный объект.

Большинство свойств объекта события (для некоторых моделей событий - все свойства) доступны только для чтения. Модель события IE предоставляет возможность изменять событие. Нажатие клавиши на клавиатуре объекта события в NN4 и W3C DOM оказывается безрезультатной.

Наиболее важное свойство объекта события в том, что он хранится в памяти ровно столько, сколько времени требуется сценарию для обработки события. Пока выполняются все функции, связанные с обработчиком, объект события со всеми свойствами хранится в памяти броузера. Как только выполняется последний оператор сценария, событие возвращается в своёисходное состояние (пустой объект либо же null).

В каждый момент времени существует только один объект события. Другими словами, насколько бы ни были сложны функции обработчика события, все они выполняются последовательно (находятся в одном выполняемом потоке).

В моделях NN4 и W3C DOM присутствуют статичные объекты событий Event. В модели W3C DOM присутствует дополнительная подкатегория объектов. Эта подкатегория рассматривается позже. Статический объект Event доступен из сценария из любого окна или фрейма (в отличие от вышерассмотренного временного объекта события в памяти).

Статический объект Event используется и как родительский объект. На его основе могут создаваться другие объекты событий. Объект Event имеет ряд свойств, которые наследуются этими объектами. Наследование особенно ярко проявляется в модели W3C DOM, при реализации которой использовались объектно-ориентированные принципы DOM.

В броузерах до NN4 любое событие инициирует объект. Если для этого события и объекта задан обработчик события, то он выполняется. Если нет - событие игнорируется. Современные броузеры отправляют любое событие в путь, передавая его через объектную модель. Концепции передачи событий в NN4 и IE4 диаметрально противоположны. А в модели W3C DOM реализованы обе модели одновременно, но с новым синтаксисом, который не повторяет ни одну из предыдущих моделей.

В основу всех трёх объектных моделей положено утверждение, что каждое событие имеет конкретную цель. Если событие инициировано взаимодействием пользователя с каким-либо объектом, то этот объект становится целью события. Если событие инициировано системой, то целью становится объект window. Различие между моделями передачи событий состоит в том, как событие достигает цели и что происходит с событием после того, как обработчик события заканчивает выполняться.

Название данной модели передачи событий в NN4 - захват события. В этой модели событие передаётся от верхнего в иерархии объекта window к объекту, представляющему цель события. При щелчке на кнопке формы схема передачи события примерно следующая:

window-->document-->[layer]-->button

Объект формы не входит в цепочку передачи.

Событие, которое проходит через все эти объекты, само является полноценным объектом с полным набором свойств, описывающих поведение пользователя или системы. Таким образом, если событие обрабатывается на уровне объекта window, одно из его свойств содержит ссылку на исходный объект, являющийся целью события. По умолчанию захват событий для каждого объекта отключён. Чтобы события обрабатывались на уровне тех объектов, через которые они проходят, необходимо включить для каждого из них захват события.

Захват событий в Netscape Navigator 4

Все три из вышеупомянутых объектов имеют метод captureEvents(). С его помощью обеспечивается захват события на уровне данного объекта. Этот метод требует одного или нескольких параметров - названия типов событий. Эти названия являются свойствами объекта Event. Если их несколько, они разделяются вертикальной чертой. Пример:

window.captureEvents(Event.KEYPRESS|Event.CLICK)

Очень желательно в целевом объекте определить обработчик событие (даже пустой). Это поможет его быстрее сгенерировать.

Затем необходимо определить, какие действия будут выполняться на уровне window над каждым типом события. Для этого нужно создать функции для обработки события, а затем создать ссылки на соответствующие функции, установив свойства обработчика событий объекта window следующим образом:

function functionForKeyEvent(...) {...}
function functionForMouseEvent(...) {...}

window.onKeyPress = functionForKeyEvent;
window.onClick = functionForMouseEvent;

Теперь если пользователь начнёт вводить текст в любое поле страницы, будет вызываться функция functionForKeyEvent(), а при щелчке мыши в любом месте документа - functionForMouseEvent().

Отключение захвата событий

Иногда требуется отключить захват события определённым объектом. Это можно сделать при помощи метода releaseEvents() объектов window, document и layer. Параметры - те же, что и у captureEvents().

Действие освобождения определённого типа события означает, что событие не обрабатывается в объектах верхнего уровня, а передаётся без изменений в целевой объект, даже если в объектах верхнего уровня для него определены какие-либо обработчики событий.

Пример захвата и освобождения событий иллюстрирует собой следующий код:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function setDocCapture(enable) {
    if (!enable) {
        document.captureEvents(Event.CLICK)
    }
    else {
    document.releaseEvents(Event.CLICK)
    }
}
function doMainClick(e) {
    if (e.target.type == "button") {
        alert("Перехвачено на уровне документа")
    }
}
document.captureEvents(Event.CLICK)
document.onclick=doMainClick
</SCRIPT>
</HEAD>
<BODY>
<B>Захват события Event.CLICK на уровне документа</B>
<HR>
<FORM>
<INPUT TYPE="checkbox" onMouseDown="setDocCapture(this.checked)" CHECKED>Включить захват события на уровне документа
<HR>
<INPUT TYPE="button" VALUE="Кнопка 'main1'" NAME="main1" onClick="alert('Событие в итоге передано объекту Button:' + this.name)">
</FORM>
<LAYER ID="layer1" LEFT=200 TOP=150 BGCOLOR="coral">
<HEAD>
</HEAD>
<BODY>
<FORM>
<BR><P><INPUT TYPE="button" VALUE="Кнопка 'layerButton1'" NAME="layerButton1" onClick="alert('Событие в итоге передано объекту Button:'+ this.name)"></P>
<P><INPUT TYPE="button" VALUE="Кнопка 'layerButton2'" NAME="layerButton2" onClick="alert('Событие в итоге передано объекту Button:' + this.name)"></P>
</FORM>
</BODY>
</LAYER>
</BODY>
</HTML>

Передача событий целевым объектам

Если объект захватывает событие определённого типа, сценарий объекта может выполнять определённые действия с событием перед тем, как отправить его к цели. Для передачи события через всю объектную иерархию к целевому объекту используется метод routeEvents(). Параметром метода является текущее событие, обрабатываемое в данной функции. Метод не гарантирует передачу события до конца (оно может быть перехвачено в объектах более низкого уровня), но гарантирует проход события через текущий объект.

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

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function setDocCapture(enable) {
    if (!enable) {
        document.captureEvents(Event.CLICK)
    }
    else {
        document.releaseEvents(Event.CLICK)
        document.forms[0].setDocRte.checked = false
        docRoute = false
    }
}
function setLayerCapture(enable) {
    if (!enable) {
        document.layer1.captureEvents(Event.CLICK)
    }
    else {
        document.layer1.releaseEvents(Event.CLICK)
        document.forms[0].setLyrRte.checked = false
        layerRoute = false
    }
}
var docRoute = false
var layerRoute = false
function setDocRoute(enable) {
    docRoute = !enable
}
function setLayerRoute(enable) {
    layerRoute = !enable
}
function doMainClick(e) {
    if (e.target.type == "button") {
        alert("Перехвачено на уровне документа")
        if (docRoute) {
            routeEvent(e)
        }
    }
}
document.captureEvents(Event.CLICK)
document.onclick=doMainClick
</SCRIPT>
</HEAD>
<BODY>
<B>Захват, отключение и передача события Event.CLICK</B>
<HR>
<FORM>
<INPUT TYPE="checkbox" NAME="setDocCap" onMouseDown="setDocCapture(this.checked)" CHECKED>Включить захват события документом&nbsp;
<INPUT TYPE="checkbox" NAME="setDocRte" onMouseDown ="setDocRoute(this.checked)">Позволить пройти далее<P>
<INPUT TYPE="checkbox" NAME="setLyrCap" onMouseDown ="setLayerCapture(this.checked)" CHECKED>Включить захват события текущим слоем&nbsp;
<INPUT TYPE="checkbox" NAME="setLyrRte" onMouseDown ="setLayerRoute(this.checked)">Позволить пройти далее к целевому объекту
<HR>
<INPUT TYPE="button" VALUE="Кнопка 'main1'" NAME="main1" onClick="alert('Событие достигло целевого объекта Button:' + this.name)">
</FORM>
<LAYER ID="layer1" LEFT=200 TOP=150 BGCOLOR="coral">
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function doLayerClick(e) {
    if (e.target.type == "button") {
        alert("Перехвачено на уровне слоя layer1")
        if (layerRoute) {
            routeEvent(e)
        }
    }
}
layer1.captureEvents(Event.CLICK)
layer1.onclick=doLayerClick
</SCRIPT>
</HEAD>
<BODY>
<FORM>
&nbsp;Слой layer1<BR><P><INPUT TYPE="button" VALUE="Кнопка 'layerButton1'" NAME="layerButton1" onClick="alert('Событие достигло целевого объекта Button:' + this.name)"></P>
<P><INPUT TYPE="button" VALUE="Кнопка 'layerButton2'" NAME="layerButton2" onClick="alert('Событие достигло целевого объекта Button:' + this.name)"></P>
</FORM>
</BODY>
</LAYER>
</BODY>
</HTML>

Передача событий в IE4 построена на других принципах, нежели в NN4. Данная модель передачи называется всплыванием события, т.к. в ней события как бы "всплывают" от целевого объекта к объектам более верхних уровней. Схема примерно следующая:

TargetObj-->[FORM]-->BODY-->HTML-->document-->[window]

Лучший способ продемонстрировать механизм всплывания событий - создать простой документ с несколькими обработчиками событий, и посмотреть, как запускается каждый из них:

<HTML onClick="alert('Событие сейчас в элементе HTML.')">
<HEAD>
<TITLE>Всплывание событий</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function init() {
    window.onclick = winEvent
    document.onclick = docEvent
    document.body.onclick = docBodEvent
}
function winEvent() {
    alert("Событие сейчас в элементе window.")
}
function docEvent() {
    alert("Событие сейчас в элементе document.")
}
function docBodEvent() {
    alert("Событие сейчас в элементе BODY.")
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Всплывание событий</H1>
<HR>
<FORM onClick="alert('Событие сейчас в элементе FORM.')">
<INPUT TYPE="button" VALUE="Button 'main1'" NAME="main1" onClick="alert('Событие запустилось в элементе Button: ' + this.name)">
</FORM>
</BODY>
</HTML>

Этот документ будет корректно работать в броузерах IE4+ и NN6, т.к. все они поддерживают всплывающие события. Но на разных платформах события будут проходить через разные объекты. В таблице указано, через какие объекты пройдёт событие для разных платформ:

Предотвращение всплывания событий в IE

В сценарии может потребоваться блокировать всплывание события к верхнему элементу иерархии. В IE каждое событие имеет свойство cancelBubble. Когда оно равно true, событие не всплывает дальше первого обработчика. Чтобы блокировать всплывание события на любом уровне, необходимо на этом уровне включить в функцию обработчика следующую строку:

event.cancelBubble = true;

Переадресация событий

Начиная с IE5.5 появилась возможность переадресовывать событие любому элементу HTML, правда, с некоторыми ограничениями. Это выполняется с помощью метода fireEvent(), который есть у всех элементов HTML. Переадресация событий с помощью этого метода не эквивалентна генерированию нового события. Но большинство свойств текущего объекта event передаётся новому объекту event, если в качестве параметра метода указать имя оригинального объекта event.

Серьёзный недостаток этого метода состоит в том, что при переадресации событий теряется ссылка на объект, являющийся целью события. Свойство srcElement исходного события, содержащее ссылку на целевой объект, заменяется ссылкой на целевой объект метода fireEvent().

Переадресацию событий может продемонстрировать следующий листинг:

<HTML onClick="revealEvent('HTML', event)">
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function revealEvent(elem, evt) {
    var msg = "Событие (от" + evt.srcElement.tagName + " на"
    msg += event.clientX + "," + event.clientY + ") сейчас на элементе "
    msg += elem
    alert(msg)
}
function init() {
    document.onclick = docEvent
    document.body.onclick = docBodEvent
}
function docEvent() {
    revealEvent("document", event)
}
function docBodEvent() {
    revealEvent("BODY", event)
}
function buttonEvent(form) {
    revealEvent("BUTTON", event)
// cancel if checked (IE4+)
    event.cancelBubble = form.bubbleCancelState.checked
// redirect if checked (IE5.5+)
    if (form.redirect.checked) {
        document.body.fireEvent("onclick", event)
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Отключение и переадресация событий</H1>
<HR>
<FORM onClick="revealEvent('FORM', event)">
<P><BUTTON NAME="main1" onClick="buttonEvent(this.form)">
Кнопка 'main1'
</BUTTON></P>
<P><INPUT TYPE="checkbox" NAME="bubbleCancelState" onClick="event.cancelBubble=true">Отключить всплывание на кнопке<BR>
<INPUT TYPE="checkbox" NAME="redirect" onClick="event.cancelBubble=true">
Переадресация события элементу BODY</P>
</FORM>
</BODY>
</HTML>

У каждой из вышерассмотренных моделей есть свои преимущества. Поэтому создатели модели события W3C DOM объединили в ней обе модели передачи. Страницы с новым синтаксисом работают в старых броузерах, поскольку модель захвата событий реализована так же, как в NN4, а модель всплывания - как в IE4+. Другими словами, можно одновременно включить и захват, и всплывание событий. При этом событие вперва достигает целевого объекта, а потом всплывает вверх по иерархии.

По умолчанию события всплывают, как в IE4+. Для того, чтобы события захватывались в W3C DOM, объекту или элементу нужно определить приёмник события. Для этого используется метод addEventListener(). Один из параметров этого метода указывает, будет ли запускаться функция-приёмник события в то время, как событие всплывает или захватывается.

Одновременное всплывание и захват события иллюстрирует следующий листинг:

<HTML>
<HEAD>
<TITLE>W3C DOM Event Propagation</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function init() {
// using old syntax to assign bubble-type event handlers
    window.onclick = winEvent
    document.onclick = docEvent
    document.body.onclick = docBodEvent
// turn on click event capture for two objects
    document.addEventListener("click", docEvent, true)
    document.forms[0].addEventListener("click", formCaptureEvent, true)
// set event listener for bubble
    document.forms[0].addEventListener("click", formBubbleEvent, false)
}
function winEvent(evt) {
    alert("Event is now at the window object level (" + getPhase(evt) + ").")
}
function docEvent(evt) {
    alert("Event is now at the **document** object level (" + getPhase(evt) + ").")
}
function docBodEvent(evt) {
    alert("Event is now at the BODY level (" + getPhase(evt) + ").")
}
function formCaptureEvent(evt) {
    alert("This alert triggered by FORM only on CAPTURE.")
}
function formBubbleEvent(evt) {
    alert("This alert triggered by FORM only on BUBBLE.")
}
// reveal event phase of current event object
function getPhase(evt) {
    switch (evt.eventPhase) {
    case 1:
        return "CAPTURING"
        break
    case 2:
        return "AT TARGET"
        break
    case 3:
        return "BUBBLING"
        break
    default:
        return ""
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>W3C DOM Event Propagation</H1>
<HR>
<FORM>
<INPUT TYPE="button" VALUE="Button 'main1'" NAME="main1" onClick="alert('Event is now at the button object level (' + getPhase(event) + ').')">
</FORM>
</BODY>
</HTML>

Если необходимо отменить захват события после того, как он был включён, нужно использовать метод removeEventListener() (так же, как был использован метод addEventListener()).

Предотвращение всплывания и захвата событий в NN6

В соответствие свойству cancelBubble в IE ставится метод объекта события в NN6. Этот метод называется stopPropagation(). Он может быть включен в любое место функции-обработчика приёмника событий. Текущая функция будет выполняться, но событие никуда не будет передаваться.

Переадресация событий в NN6

Существует ещё один механизм отправки события объекту, отличный от стандартного - с помощью переадресации, принятой в IE4+. Он использует другой синтаксис. Вместо метода в IE4+ fireEvent() в NN6 применяется метод W3C DOM dispatchEvent() Единственный параметр метода - объект события, например, текущего.

Следующий листинг является примером всплывания и переадресации событий в NN6.

<HTML onClick="revealEvent('HTML', event)">
<HEAD>
<TITLE>Event Cancelling & Redirecting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// display alert with event object info
function revealEvent(elem, evt) {
    var msg = "Event (from " + evt.target.tagName + " at "
    msg += evt.clientX + "," + evt.clientY + ") is now at the "
    msg += elem + " element."
    alert(msg)
}
function init() {
    document.onclick = docEvent
    document.body.onclick = docBodEvent
}
function docEvent(evt) {
    revealEvent("document", evt)
}
    function docBodEvent(evt) {
    revealEvent("BODY", evt)
}
function buttonEvent(form, evt) {
        revealEvent("BUTTON", evt)
// redirect if checked
    if (form.redirect.checked) {
        document.body.dispatchEvent(evt)
    }
// cancel if checked
    if (form.bubbleCancelState.checked) {
        evt.stopPropagation()
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Event Cancelling & Redirecting</H1>
<HR>
<FORM onClick="revealEvent('FORM', event)">
<P><BUTTON NAME="main1" onClick="buttonEvent(this.form, event)">Button 'main1'</BUTTON></P>
<P><INPUT TYPE="checkbox" NAME="bubbleCancelState" onClick="event.stopPropagation()">Cancel Bubbling at BUTTON<BR>
<INPUT TYPE="checkbox" NAME="redirect" onClick="event.stopPropagation()">Redirect Event to BODY</P>
</FORM>
</BODY>
</HTML>

Несмотря на то, что на сегодняшний день существует три различных модели событий, существует всего 2 способа доступа в сценарии к их объектам: принятый в IE, а также принятый в NN (и W3C).

Ссылки на объект события в IE4+

В IE4 объект события доступен как свойство объекта window:

[window.]event.имяСвойства

Таким образом, любой оператор в обработчике событий имеет доступ к объекту события без предварительного объявления или инициализации.

Ссылки на объект события в NN4+ (и W3C)

Здесь в некоторых случаях нужно явным образом задать объект как параметр функции обработчика событий. В то же время в некоторых случаях объект автоматически назначается как параметр. Разница состоит в том, каким образом обработчик событий связывается с объектом.

Если используется обычный способ привязки обработчика событий к объектам - с помощью свойства дескриптора элемента, то необходимо задать объект события как параметр event:

onClick="doSomething(event)"

Это единственный случай в модели NN4, когда вы увидите явную ссылку на объект event (e - в нижнем регистре), как на глобальный объект. Эта ссылка не используется ни в каком другом контексте - только как параметр функции обработчика событий. Если в функции используется несколько параметров, то event можно указывать любым по счёту. При этом в определении функции должна задаваться параметр-переменная, описывающая объект события.

onClick="doSomething(this, flag, event)"
...
function doSomething(obj, boolVar, evt) {...}

Существует ещё несколько способов привязки функции-обработчика события к объектам - с помощью специальных свойств и метода addEventListener() в NN6 - в обработчиках событий можно назначить ссылки на необходимые объекты в документе, как это показано ниже:

document.forms[0].someButton.onClick = doSomething;
document.getElementById("myButton").addEventListener("click",doSomething,false);

Привязка событий таким образом не допускает передачи параметров вызываемым функциям. Но броузеры NN4+ автоматически воспринимают ссылку на объект события, который создаётся в ответ на действия пользователя или системы, как параметр. Это означает, что функции получают обработанный объект события в качестве параметра-переменной.

function doSomething(obj, boolVar, evt) {...}

Вследствие того, что объект события содержит ссылку на исходный объект как одно из свойств. это позволяет получить доступ к целевому объекту.

Данный механизм иллюстрирует предыдущий листинг.

Несмотря на несовместимость способов, с помощью которых в IE и NN объект события попадает в функцию обработчика, можно использовать одну переменную таким образом, что оба броузера её поймут:

function doSomething(evt)
    {
    evt = (evt)?evt:(window.event)?window.event:""
    if (evt)
        {
        ...
        }
    }

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

Можно обойти это с помощью подобных выражений:

var elem = (evt.target)?evt.target:evt.srcElement;

Хотя броузеры до версии 4 не поддерживают возможность управления объектом события, наступило время рассмотреть его свойство type. Объектные модели IE4+ и NN6 предоставляют обработчик события почти для кажного элемента HTML.

Создателистарых броузеров стремились к уменьшению количества обработчиков событий, предоставляя их только тем элементам, которые, по их мнению, должны ими обладать. При этом с увеличением числа объектов требовалось больше обработчиков. Следующая таблица показывает типы событий для ранних версий броузеров:

В более новых броузерах существует много большее количество объектов и типов событий. См. спецификацию для каждого объекта.