Общие сведения о модели событий

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

  • Жизненный цикл события 
  • Присоединение обработчика событий
    • Присоединение обработчика событий с помощью свойств события 
    • Обработка пользовательских событий и событий с параметрами 
  • Дополнительные сведения о восходящей маршрутизации событий 
  • Возврат значений и отмена действий по умолчанию 
  • Область действия обработчиков событий 
  • Объект Event 
  • События клавиатуры 
  • События мыши 
    • Нажатия кнопки мыши 
    • Перемещение между элементами 
  • События смены фокуса и выделения 
  • События загрузки и состояния готовности 
  • Прочие события 

Жизненный цикл события

Событие имеет жизненный цикл, который начинается с выполнения действия или иного условия, инициирующего событие, и завершается определенной реакцией со стороны обработчика событий или Windows Internet Explorer. Жизненный цикл стандартного события состоит из следующих этапов.

  1. Выполняется действие пользователя или условие, связанное с событием.
  2. Объект event немедленно обновляется в соответствии с условиями наступления события.
  3. Событие инициируется. Именно на этом этапе происходит оповещение о том, что произошло новое событие.
  4. Вызывается обработчик событий, связанный с исходным элементом. Обработчик выполняет указанные в нем действия и завершает работу.
  5. Событие передается вышестоящему элементу в иерархии, для которого вызывается обработчик событий. Этот процесс продолжается до тех пор, пока не будет достигнут объект window или обработчик не прервет восходящую маршрутизацию.
  6. Выполняется завершающее действие по умолчанию, если оно предусмотрено и если оно не было отменено обработчиком.

При восходящей маршрутизации событий, если с элементом-источником не связан обработчик событий, вызывается обработчик событий для следующего элемента в иерархии.

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

В следующем примере определяется обработчик событий wasClicked для события onclick, который связывается с элементом BODY. Когда пользователь щелкает мышью в любом месте документа, инициируется событие и обработчик выводит сообщение «I was clicked» с указанием имени тега элемента, в котором произошло событие.

<HTML>

<BODY onclick="wasClicked()">

<H1>Welcome!</H1>

<P>This is a very <B>short</B> document.

<SCRIPT LANGUAGE="JScript">

function wasClicked() {

    alert("I was clicked " + window.event.srcElement.tagName);

}

</SCRIPT>

</BODY>

</HTML>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/event_01.htm

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

Привязав еще один обработчик событий wasAlsoClicked к элементу p, можно проследить, как реализуются родительски-дочерние отношения между элементами документа.

<HTML>

<BODY onclick="wasClicked()">

<H1>Welcome!</H1>

<P onclick="wasAlsoClicked()">This is a very <B>short</B> document.

<SCRIPT LANGUAGE="JScript">

function wasClicked() {

    alert("I was clicked " + window.event.srcElement.tagName);

}

function wasAlsoClicked() {

    alert("You clicked me " + window.event.srcElement.tagName);

}

</SCRIPT>

</BODY>

</HTML>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/event_02.htm

В предыдущем примере, если пользователь щелкает заголовок «Welcome!», появляется сообщение «I was clicked H1». Однако если пользователь щелкнет слово «short», появятся два сообщения: «You clicked me B» и «I was clicked B». В первом случае при щелчке по заголовку «Welcome!» запускается событие onclick, источником для которого является элемент H1. Для этого элемента отсутствует обработчик событий, поэтому событие передается его родительскому элементу в иерархии, BODY, и вызывается обработчик событий этого элемента wasClicked.

Во втором случае, когда пользователь щелкает слово «short», снова инициируется событие onclick. Теперь источником является элемент b. Поскольку для элемента b отсутствует обработчик событий, событие передается элементу p и вызывается его обработчик событий wasAlsoClicked. Однако на этом жизненный цикл события не завершается. После того как выполнение обработчика событий wasAlsoClicked завершается, событие передается далее следующему родительскому элементу в иерархии — BODY. Это приводит к вызову обработчика событий wasClicked.

В некоторых случаях восходящая маршрутизация событий является нежелательной. Чтобы прервать ее, необходимо в любом обработчике событий задать для свойства cancelBubble объекта event значение true. После завершения работы обработчика событие не будет передаваться далее, и его жизненный цикл завершится. Обратите внимание, что отмена восходящей маршрутизации распространяется только на текущее событие, но не на последующие. Для последующих событий потребуется отменять восходящую маршрутизацию явным образом.

Рассмотрим следующий пример. В нем определяются два обработчика событий, setBodyStyle и setParaStyle, которые вызываются, когда пользователь щелкает мышью в документе или абзаце соответственно. Чтобы при щелчке пользователем в абзаце изменялся только его стиль, обработчик событий setParaStyle запрещает передачу события объекту BODY с помощью свойства cancelBubble.

<HTML>

<BODY onclick="setBodyStyle()">

<H1>Welcome!</H1>

<P onclick="setParaStyle()">This is a very <B>short</B> document.

<SCRIPT LANGUAGE="JScript">

function setBodyStyle() { // Для всех заголовков задается зеленый цвет шрифта

    var coll = document.all.tags("H1");

    for (i=0; i<coll.length; i++)

        coll.item(i).style.color = "green";

}

function setParaStyle() { // Абзац подчеркивается

    var el = window.event.srcElement;

    while ((el != null) && (el.tagName != "P")) {

        el = el.parentElement;

    }

    if (el != null) el.style.textDecoration = "underline";

    window.event.cancelBubble = true;

}

</SCRIPT>

</BODY>

</HTML>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/event_03.htm

В предыдущем примере элемент p не является элементом-источником по умолчанию. Так как пользователь может щелкнуть элемент b, обработчик событий должен проверить элемент перед применением стиля. В этом случае обработчик использует свойство parentElement для перехода по иерархии элементов, пока не будет найден элемент p.

Присоединение обработчика событий

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

Объявите функцию обработчика событий и используйте вызов этой функции в соответствующем встроенном атрибуте события в HTML-теге. В следующем примере определяется функция Microsoft JScript с именем flip, которая связывается с элементом img как обработчик события onmouseover.

<SCRIPT LANGUAGE="JScript">

function flip() {

    // Выполняются необходимые действия

}

</SCRIPT>

    .

    .

    .

<IMG SRC="sample.gif" onmouseover="flip()">

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

Объявите код обработки событий и свяжите его с событием с помощью атрибутов FOR и event тега script. В следующем примере определяется код JScript, который связывается как обработчик события onmouseover с элементом img, имеющим идентификатор MyImage.

<SCRIPT FOR=MyImage EVENT=onmouseover LANGUAGE="JScript">

    // Выполняются необходимые действия

</SCRIPT>

    .

    .

    .

<IMG ID=MyImage SRC="sample.gif">

Объявите функцию обработчика событий на языке VBScript и свяжите ее с событием, присвоив ей имя в формате: код_событие. В следующем примере определяется функция VBScript, связанная с элементом img как обработчик события onmouseover.

<SCRIPT LANGUAGE="VBScript">

Function MyImage_onmouseover

    ' Выполняются необходимые действия

End Function

</SCRIPT>

    .

    .

    .

<IMG ID=MyImage SRC="sample.gif">

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

Обработчик событий на языке JScript Если обработчик определен с помощью встроенного атрибута события, связывание производится при создании элемента.
Код обработки событий с использованием атрибутов FOR и EVENT Связывание производится после того, как документ полностью загружается.
Обработчик событий на языке VBScript Связывание производится после того, как загружается документ и все содержащиеся в нем объекты и приложения.

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

Один обработчик событий можно связать с несколькими элементами в документе. Таким образом можно обеспечить одинаковую обработку определенного события, происходящего в любом из элементов. Как правило, обработчик событий предназначен для обработки определенного события. Однако можно создать обработчик событий для нескольких типов событий.

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

Если в документе используются различные способы обработки, можно также определить несколько обработчиков событий для определенного события в одном элементе. Например, можно определить обработчики событий JScript и VBScript и связать их с одним событием и элементом. Если связать таким образом несколько обработчиков событий, написанных на разных языках, с одним элементом, все обработчики будут реагировать на событие, но очередность реагирования не определена.

Если связать два обработчика событий на одном языке с одним событием и элементом, событие получит только последний обработчик. Однако любой обработчик, связанный с помощью атрибутов FOR и EVENT, всегда имеет приоритет над обработчиком, связанным с помощью встроенного атрибута события.

При использовании встроенного атрибута обычно ему присваивается вызов функции обработчика событий, что приводит к вызову этой функции при инициации события. Однако присваивать вызов обработчика событий необязательно. Вместо этого можно присвоить любой допустимый код сценария, который будет выполняться при наступлении события. Например, при нажатии на следующий элемент button выводится сообщение «Hello World!».

<BUTTON onclick="alert('Hello World!')" LANGUAGE="JScript">Click Me</BUTTON>

Такой способ удобен, поскольку код относительно лаконичен и прост. При использовании встроенного атрибута в этом случае также потребуется использовать атрибут LANGUAGE для указания скриптового языка. Если язык не указан, используется либо язык по умолчанию, либо язык, который был указан последним.

Присоединение обработчика событий с помощью свойств события

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

В следующем примере на языке JScript свойство event используется для связывания обработчика событий setHeadStyle с элементом H1. Указатель на функцию setHeadStyle присваивается свойству onclick элемента.

<H1 id=MyHeading>Welcome!</H1>

    .

    .

    .

<SCRIPT LANGUAGE="JScript">

function setHeadStyle() {

    window.event.srcElement.style.color = "green";

}

document.all.MyHeading.onclick=setHeadStyle;

</SCRIPT>

Обработка пользовательских событий и событий с параметрами

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

Используйте атрибут FOR, чтобы указать элемент или объект, для которого должна производиться обработка, указав в качестве его значения идентификатор или имя объекта, приложения или элемента управления. Если этот атрибут не указать, обработчик связывается по умолчанию с объектом window. Обратите внимание, что в коде на языке JScript учитывается регистр, поэтому идентификатор или имя должны вводиться в точности так же, как они указаны в соответствующем элементе или объекте.

Используйте атрибут EVENT, чтобы указать событие, с которым должно осуществляться связывание, присвоив ему имя события. Если событие генерирует параметры (как в случае с некоторыми предопределенными событиями), можно также указать список имен параметров, разделенных запятыми, в скобках сразу после имени события. Параметры являются нетипизированными. Так как в коде на языке JScript учитывается регистр, имена событий необходимо вводить только строчными буквами. Кроме того, если приводится список параметров, он должен содержать все параметры, определенные для события, даже если некоторые из них не используются.

В следующем примере на языке JScript код обработки событий связывается с событием onerror для объекта window. Это событие наступает, если в процессе загрузки документа происходит ошибка. Это событие генерирует параметры. Поэтому приводится список параметров, а параметр lineno используется в коде.

<SCRIPT FOR=window EVENT="onerror(message, url, lineno)" LANGUAGE="JScript">

alert("An error has occurred on line " + lineno);

</SCRIPT>

В следующем примере на языке JScript код обработки событий связывается с пользовательским событием ondatechange, которое инициируется внедренным объектом.

<OBJECT ID=myDateObject ... ></OBJECT>

<SCRIPT FOR=myDateObject EVENT="ondatechange()" LANGUAGE="JScript">

    // Выполнение действия при изменении данных

</SCRIPT>

Другим способом обработки пользовательских событий и получения параметров события является связывание обработчиков VBScript. В этом случае имя обработчика события указывается в формате VBScript код_событие, и при необходимости приводится список параметров. Следующий образец кода на языке VBScript обрабатывает событие onerror и получает его параметры.

<SCRIPT LANGUAGE="VBScript">

Function window_onerror(message, url, lineno)

    alert "An error has occurred on line " & lineno

End Function

</SCRIPT>

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

<OBJECT ID=myDateObject ... ></OBJECT>

<SCRIPT LANGUAGE="VBScript">

Function myDateObject_ondatechange()

    // Выполнение действия при изменении данных

End Function

</SCRIPT>

Дополнительные сведения о восходящей маршрутизации событий

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

<P onclick="doPara()">

Jump to a<B>sample</B> document.

</P>

Пользователь вполне обоснованно ожидает, что при щелчке по слову «sample» произойдет то же действие — вызов обработчика событий doPara — что и при щелчке по любому другому слову в элементе p. Если бы события не передавались из элемента-источника, при щелчке по слову «sample» ничего не происходило бы, поскольку с элементом b не связан обработчик событий. Однако поскольку события передаются вверх по иерархии элементов, каждый обработчик событий в родительской иерархии элемента имеет возможность среагировать на событие. В данном случае при щелчке по слову «sample» вызывается обработчик doPara.

Если не учитывать восходящую обработку событий, то поначалу результаты выполнения кода могут вызвать недоумение. Например, рассмотрим документ, в котором используются события onmouseover и onmouseout для отображения и скрытия коллекции абзацев, а также используются события внутри списка для выделения абзацев в коллекции.

<DIV onmouseover="showPara()" onmouseout="hidePara()">

My Menu

<P STYLE="display:none" onmouseover="highlight()" onmouseout="unhighlight()">Item 1

<P STYLE="display:none" onmouseover="highlight()" onmouseout="unhighlight()">Item 2

</DIV>

Предположим, что в предыдущем примере пользователь сначала наводит указатель мыши на слова «My Menu», затем на слова «Item 1» и, наконец, на слова «Item 2». При этом происходит следующее.

  1. Указатель мыши наводится на слова «My Menu».
  2. Для элемента div инициируется событие onmouseover, и вызывается обработчик событий showPara.
  3. Указатель мыши перемещается со слов «My Menu».
  4. Для элемента div инициируется событие onmouseout, и вызывается обработчик событий hidePara.
  5. Указатель мыши наводится на слова «Item 1».
  6. Для элемента p инициируется событие onmouseover, и вызывается обработчик событий highlight.
  7. Событие onmouseover передается элементу div, и вызывается обработчик событий showPara с элементом p в качестве источника.
  8. Указатель мыши перемещается со слов «Item 1».
  9. Для элемента p инициируется событие onmouseout, и вызывается обработчик событий unhighlight.
  10. Событие onmouseout передается элементу div, и вызывается обработчик событий hidePara с элементом p в качестве источника.
  11. Указатель мыши наводится на слова «Item 2».
  12. Для элемента p инициируется событие onmouseover, и вызывается обработчик событий unhighlight.
  13. Событие onmouseover передается элементу div, и вызывается обработчик событий showPara с элементом p в качестве источника.

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

Вообще говоря, при таком использовании вложенных обработчиков событий необходимо тщательно продумать, должен ли обработчик событий выполнять действия при каждом его вызове. Одним из способов управления обработкой является использование свойства cancelBubble. В предыдущем примере обработчики событий highlight и unhighlight могли присвоить свойству cancelBubble значение true, запретив таким образом его передачу элементу div. Другим способом является проверка элемента, являющегося источником события, с помощью свойства srcElement объекта event и выбор действия в соответствии с этим элементом.

Можно перехватывать события для элемента, даже если элемент изначально не поддерживает данное событие. Например, событие onkeydown поддерживается объектом input type=text. Однако благодаря восходящей маршрутизации событий можно определить обработчик событий onkeydown для элемента div. Все события onkeydown, инициируемые дочерними элементами элемента div, будут передаваться в элемент div и обрабатываться его обработчиком событий.

<DIV onkeydown="OnChangeHandler()">

<INPUT TYPE=TEXT>

<INPUT TYPE=TEXT>

</DIV>

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

Возврат значений и отмена действий по умолчанию

Обработчики событий могут возвращать значения в событие либо с помощью механизма возврата значений, определенного в языке, например оператора return в JScript, либо с помощью свойства returnValue объекта event.

Возвращаемые значения могут использоваться для управления действиями по умолчанию, связанными с событиями. Например, при щелчке по элементу a браузер загружает документ, указанный в атрибуте HREF. Для отмены подобных действий по умолчанию обработчик событий должен вернуть значение false.

Не все языки сценариев поддерживают возвращаемые значения. В таких языках для возврата значений следует использовать свойство returnValue. Если язык поддерживает возвращаемые значения, можно использовать либо определенный в языке метод возврата значений, либо свойство returnValue. При использовании обоих способов приоритет имеет свойство.

По завершении восходящей маршрутизации события любое действие по умолчанию, связанное с событием, отменяется, если свойство returnValue имеет значение falseили, если это свойство не задано, последняя функция вернула значение false. С некоторыми событиями не связаны действия по умолчанию. Такие события могут использовать свойство returnValue (или значение, возвращаемое функцией) в других целях.

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

Область действия обработчиков событий

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

При инициации события специальная ссылка на объект — указатель me в VBScript или this в JScript — связывается с текущим элементом, инициировавшим событие.

1) Обработчик событий для кнопки, расположенной вне формы.

Это самая распространенная ситуация. Можно использовать любой из механизмов обработки, описанных выше. Единственная особенность заключается в том, что обращаться к элементам, определенным внутри блока form, непосредственно через объект window нельзя. Вместо этого к ним можно обращаться из объекта document или коллекции elements данной формы.

2) Обработчик событий, определенный вне блока form, для кнопки, расположенной внутри формы.

Если кнопка имеет уникальный идентификатор в пределах всего документа, обработчик событий можно определить в любом месте документа. Если обработчик событий определяется вне блока form, действуют те же правила относительно доступа к элементам посредством объекта window, что и в сценарии 1 выше.

3) Обработчик событий, определенный внутри блока form, для кнопки, расположенной внутри формы.

Если идентификатор кнопки не является уникальным в пределах всего документа, обработчик событий должен определяться внутри формы. Если обработчики событий определяются внутри формы, использование встроенных атрибутов или атрибутов FOR и EVENT (но не функции VBScript с именем код_событие) изменяет правила области действия для объекта window. События, определенные таким образом, могут обращаться к элементам внутри формы непосредственно через объект window. Они также могут обращаться к элементам вне формы напрямую, если при этом не возникают конфликты с именами элементов формы.

При использовании функции обработки VBScript с именем в формате код_событие только элементы, находящиеся вне области действия формы, доступны как свойства объекта window.

Если внутри формы отсутствует уникальный идентификатор, то при использовании атрибутов FOR и EVENT элемента script или функции VBScript код_событие с обработчиком событий связывается первый элемент с соответствующим идентификатором.

4) Обработчик событий, определенный внутри блока form, для кнопки, расположенной вне формы.

Обработчик событий выполняется, только если используется функция обработки VBScript с именем в формате id_event. В противном случае обработчик не выполняется.

Можно создать обработчик событий для нескольких элементов. Однако элементы при этом не должны находиться внутри одной области действия. Под областью действия здесь понимается нахождение элемента внутри формы или вне ее. Например, определен обработчик событий для элемента id=genericButton в области действия документа. Если добавить один элемент genericButton в документ, а другой — в форму, то в обоих случаях будет инициироваться одинаковое событие мыши. Указатель me будет указывать на фактический источник события. При этом элементы не обязательно должны иметь одинаковый тип.

Если несколько элементов имеют одинаковый идентификатор и находятся в одной области действия, только первый элемент инициирует событие.

Объект Event

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

<SCRIPT LANGUAGE="VBScript">

Function document_onclick

    alert window.event.srcElement.tagName

End Function

</SCRIPT>

<SCRIPT LANGUAGE="JScript">

function doClick() {

    alert(window.event.srcElement.tagName);

}

</SCRIPT>

Примечание.  При использовании объекта event в VBScript следует использовать с ним ключевое слово window во избежание конфликта с ключевым словом VBScript event.

Одним из наиболее важных свойств объекта event является свойство srcElement. Обработчики событий часто используют это свойство для определения того, какое действие следует выполнить, в соответствии с источником события. Например, следующий обработчик событий на языке JScript выполняет действие, если пользователь щелкает один из элементов H1 в документе.

<SCRIPT FOR=document EVENT="onclick()" LANGUAGE="JScript">

    if ("H1" == event.srcElement.tagName) {

        // пользователь щелкнул элемент H1

    }

</SCRIPT>

Еще одним важным свойством является свойство cancelBubble, которое управляет восходящей маршрутизацией данного события. Если оно имеет значение true, передача события вверх по иерархии элементов запрещается.

Свойство returnValue обеспечивает независимый от языка способ возврата обработчиком событий значения в событие. Для многих событий установка возвращаемого значения равным falseотменяет действие по умолчанию для данного события.

Некоторые свойства объекта event имеют смысл только для определенных событий. Например, свойство keyCode имеет целочисленное значение, определяющее стандартный числовой код клавиши Unicode для событий клавиатуры. Для других событий значение этого свойства равно нулю. Другими примерами могут служить свойства toElement и fromElement, представляющие элементы, на которые наводится указатель мыши или с которых он перемещается, для событий onmouseover и onmouseout. Для других событий эти свойства имеют значение null.

При наступлении события мыши, например onclick, свойства x и y определяют горизонтальное и вертикальное положение указателя мыши. Если элементы, содержащие элемент-источник, не позиционированы, положение указателя определяется относительно элемента BODY. Если контейнер элемента-источника позиционирован, положение указателя определяется относительно контейнера. Кроме положения указателя мыши, можно также определить, какие кнопки мыши были нажаты в момент наступления события, с помощью свойства button. Это свойство имеет следующие значения: 0 — кнопки не нажаты; 1 — нажата левая кнопка; 2 — нажата правая кнопка; 3 — нажаты обе кнопки.

Свойства altKey, ctrlKey и shiftKey могут использоваться для всех событий. С помощью этих свойств можно определить, были ли нажаты клавиши ALT, CTRL и SHIFT в момент наступления события. Каждое из этих свойств имеет значение true, если была нажата соответствующая клавиша. В следующем примере кода на языке VBScript отменяется действие по умолчанию для элемента a, если в момент наступления события нажата клавиша SHIFT.

<SCRIPT FOR=document EVENT="onclick()" LANGUAGE="VBScript">

    If (("A" = window.event.srcElement.tagName) and (window.event.shift)) Then

        event.returnValue = false

    End If

</SCRIPT>

Свойства clientX и clientY имеют целочисленные значения, определяющие координаты относительно размера клиентской области без учета элементов оформления окна. Свойства offsetX и offsetY имеют целочисленные значения, определяющие положение относительно контейнера. Они соответствуют свойствам offsetTop и offsetLeft элемента. Для определения контейнера, относительно которого указывается положение, используется свойство offsetParent. Свойства screenX и screenY имеют целочисленные значения, определяющие координаты относительно физического экрана.

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

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

События клавиатуры

События клавиатуры происходят, когда пользователь нажимает или отпускает клавишу на клавиатуре. События onkeydown и onkeyup инициируются в тот момент, когда клавиша соответственно нажимается или отпускается. Эти события инициируются для всех клавиш клавиатуры, включая клавиши SHIFT, CTRL и ALT.

Событие onkeypress инициируется, когда нажатие пользователем клавиши преобразуется в код символа. Это происходит, например, когда пользователь нажимает клавиши с буквами или цифрами, в том числе в сочетании с клавишами SHIFT, CTRL или ALT.

При наступлении события клавиатуры свойство keyCode объекта event код Unicode, соответствующий нажатой клавише. Свойства altKey, ctrlKey и shiftKey указывают на состояние клавиш ALT, CTRL и SHIFT.

Изменить клавишу, связанную с событием, можно либо путем изменения значения свойства keyCode, либо с помощью возвращаемого целочисленного значения. Отменить событие можно, задав возвращаемое значение равным нуля или false.

Событие onhelp — это специальное событие клавиатуры, которое наступает, когда пользователь нажимает клавишу вызова справки (F1).

События мыши

События мыши наступают, когда пользователь перемещает указатель мыши или нажимает левую кнопку мыши. Событие onmousemove инициируется при перемещении мыши, а события onmouseover и onmouseout — когда указатель мыши наводится на элемент и перемещается из него. События onmousedown и onmouseup инициируются в тот момент, когда левая кнопка мыши соответственно нажимается или отпускается. События onclick и ondblclick инициируются, когда пользователь щелкает кнопку соответственно один раз и дважды.

При наступлении события мыши свойство button объекта event определяет нажатую кнопку мыши. Свойства x и yопределяют положение указателя мыши в момент наступления события. Для событий onmouseover и onmouseout свойства toElement и fromElement определяют элементы, на которые указатель наводится и с которых он перемещается.

Нажатие кнопки мыши

Событие onclick инициируется, когда пользователь нажимает и отжимает кнопку. Событие ondblclick наступает, если время, прошедшее между двумя последовательными событиями onclick, находится в пределах отрезка времени, заданного в системе.

События нажатия кнопок мыши чередуются с событиями onmousedown и onmouseup. Например, событие onclick наступает после события onmouseup. Событие ondblclick наступает после приведенной ниже последовательности событий.

  1. onmousedown
  2. onmouseup
  3. onclick
  4. onmouseup
  5. ondblclick

Событие onclick также может наступить, когда пользователь нажимает клавишу ВВОД, когда элемент, например button, имеет фокус ввода. В этом случае перед наступлением этого события событие onmouseup не происходит.

Отменить щелчок мыши можно, задав возвращаемое значение равным false или присвоив свойству returnValue значение false.

Примечание.  Если мышь имеет только одну кнопку, она считается левой кнопкой.

Перемещение между элементами

События onmouseover и onmouseout инициируются при перемещении указателя мыши от одного элемента к другому. Рассмотрим следующий фрагмент документа.

<H1>Move from here</H1>

<P id=myP><B><I>To here</I></B></P>

В предыдущем примере, когда указатель мыши перемещается от элемента H1 к словам «To here», он пересекает границы элементов p, b и i. Однако последовательность событий сводится к следующей: событие onmouseout в элементе H1, которое передается вверх по иерархии, и событие onmouseover в элементе i, которое также передается вверх по иерархии.

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

При перемещении указателя между элементами событие onmouseout инициируется первым, указывая на то, что указатель был перемещен с исходного элемента. Затем инициируется событие onmousemove, указывающее на то, что указатель был перемещен. Наконец, инициируется событие onmouseover, указывающее на то, что указатель мыши был наведен на новый элемент.

События смены фокуса и выделения

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

События смены фокуса происходят в таких элементах, как button и объектах INPUT различных типов, которые могут получать фокус ввода. Для этих элементов событие onfocus инициируется, когда элемент получает фокус, а событие onblur — когда элемент теряет фокус. Элемент получает фокус ввода, когда пользователь щелкает его мышью или переходит к нему с помощью клавиатуры. Эти события позволяют определить, когда следует готовить элемент к вводу данных пользователем.

Примечание.  События смены фокуса инициируются при перемещении фокуса ввода между элементами в документе, между фреймами в окне или даже между приложениями на рабочем столе. Например, если определенный элемент управления в документе имеет фокус ввода, то при переключении к другому приложению для этого элемента управления инициируется событие onblur. Когда пользователь повторно переключается к документу, инициируется событие onfocus. Отменить потерю фокуса невозможно.

События выделения инициируются, когда пользователь выделяет часть документа с помощью мыши или клавиатуры. Событие onselectstart наступает, когда инициируется выделение. Это событие может наступать, например, когда пользователь щелкает символ или объект в документе. Событие onselect инициируется при изменении выделения, например, при перемещении указателя мыши над частью документа с зажатой кнопкой мыши. Действием по умолчанию для события onselectstart является выделение данного символа или объекта и подсветка выделения. Отменить это действие по умолчанию можно, установив возвращаемое значение равным false.

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

События загрузки и состояния готовности

На текущее состояние документа указывают три события: onreadystatechange, onload и onunload.

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

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

Код обработки событий onload и onunload может определяться в теге BODY. Однако эти события в действительности инициируются для объекта window. Поэтому при обработке события onload с использованием синтаксиса <SCRIPT FOR= EVENT=> код <SCRIPT FOR="myBody" Event="onLoad"> приведет к ошибке. Вместо этого следует использовать код <SCRIPT FOR="window" Event="onLoad">.

Прочие события

В документах можно использовать также ряд других полезных событий. Полный список событий см. в статье События DHTML.