Глава 4.11. Обработка событий в DOM

4.11.1. Основные понятия

4.11.1.1. Генерация и распространение событий

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

  • Аппаратные события пользовательского интерфейса. Это события, вызванные взаимодействием пользователя с устройствами ввода-вывода (нажатие клавиши, движение мыши и т. п.)
  • Логические события пользовательского интерфейса. Это события, не связанные с внешними устройствами, например, получение от операционной системы сообщения о смене фокуса.
  • События, генерируемые изменением структуры документа, например, добавление нового элемента.

Модель событий DOM 2 пока реализована только в Gecko. Internet Explorer имеет свою модель генерации и обработки событий, которая описана в гл. 4.12.

WDH+ О различиях в обработке событий этими обозревателями см. WDH+: Прерывание скрипта.

Любое событие связано с конкретным узлом документа (цель события), доступным через интерфейс EventTarget, который указывается в свойстве target объекта Event, описывающего данное событие. Когда событие достигает своей цели, активизируются все обработчики событий данного узла, описываемые интерфейсом EventListener. При этом гарантируется, что все обработчики будут активизированы, но не оговаривается порядок, в котором это будет происходить. Если не произойдет перехвата или просачивания события, то процесс генерации события завершится, когда все обработчики будут активизированы. Этот процесс называется распространением события (event propagation). Если происходит перехват события или его просачивание, то процесс обработки события изменяется, как описано ниже.

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

4.11.1.2. Перехват события

Перехват события (event capture) состоит в следующем. Обработчик события любого предка цели может перехватить событие прежде, чем оно достигнет своей цели. Процесс перехвата действует сверху вниз от корня дерева документа, т. е. от объекта Document. В момент генерации события фиксируется цепочка его существующих обработчиков от корня дерева до узла-цели; если во время обработки события какие-то обработчики будут удалены или добавлены, то это не окажет влияния на процесс обработки данного события.

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

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

4.11.1.3. Просачивание события

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

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

Является событие просачивающимся или нет, определяется свойством bubbles его интерфейса Event.

4.11.1.4. Отмена события

Некоторые события являются отменяемыми (cancelable). Для таких событий обычно предусмотрена типовая обработка. Примером может служить щелчок мышью на гиперссылке, где действием по умолчанию является загрузка ресурса, на который указывает гиперссылка. Перед выполнением типовой обработки реализация DOM должна вызвать обработчики данного события, если таковые зарегистрированы. Обработчики имеют возможность либо отменить типовую обработку события, либо разрешить ее. В примере с гиперссылкой отмена события означает, что загрузка ресурса не произойдет.

Является событие отменяемым или нет, определяется свойством cancelable его интерфейса Event. Отмена типовой обработки события производится вызовом метода preventDefault этого интерфейса.

4.11.1.5. Исключения: интерфейс EventException

В процессе обработки события может быть сгенерировано исключение, описываемое интерфейсом EventException. Этот интерфейс имеет единственное свойство code типа Number, которое содержит номер исключения согласно следующей таблицы:

Название Значение Описание Модель
UNSPECIFIED_EVENT_TYPE_ERR 0 Тип события не задан или пуст. DOM 2

4.11.2. Регистрация обработчиков событий: интерфейс EventTarget

Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

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

Методы интерфейса EventTarget
Метод Модель Описание
addEventListener DOM 2 Регистрирует обработчик события.
dispatchEvent DOM 2 Генерирует заданное событие.
removeEventListener DOM 2 Удаляет обработчик события.

Метод addEventListener

Синтаксис:  узел.addEventListener(type, listener, useCapture)
Аргументы:  type — выражение типа DOMString
            listener — выражение типа EventListener
            useCapture — логическое выражение
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Метод addEventListener регистрирует новый обработчик listener события type для данного узла. Если аргумент useCapture равен true, то этот обработчик будет перехватывать событие type. Если новый обработчик регистрируется во время обработки события, то он будет активизироваться только следующими событиями. Повторная регистрация уже существующего обработчика для данного события игнорируется. Следующий пример перехватывает все щелчки мыши на Веб-странице и выводит тег HTML-элемента, на котором мы щелкнули.

function mouseClick(event) {
  var tag = event.target.tagName ? event.target.tagName :
    event.target.parentNode.tagName;
  alert(tag);
}

document.addEventListener("click", mouseClick, true);

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

Метод dispatchEvent

Синтаксис:  узел.dispatchEvent(evt)
Аргументы:  evt — выражение типа Event
Исключения: UNSPECIFIED_EVENT_TYPE_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Метод dispatchEvent генерирует событие evt. Обработка события, созданного этим методом, происходит так же, как обработка событий, сгенерированных исполняющей системой. Целью события является узел, из которого вызван данный метод. Пример:

var evt = new Event;
evt.initEvent("click", true, true);
document.body.dispatchEvent(evt);

Метод removeEventListener

Синтаксис:  узел.removeEventListener(type, listener, useCapture)
Аргументы:  type — выражение типа DOMString
            listener — выражение типа EventListener
            useCapture — логическое выражение
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Метод removeEventListener удаляет обработчик события для данного узла. Аргументы listener, type и useCapture имеют тот же смысл, что в методе addEventListener. Если обработчик удаляется во время обработки события, то он уже не будет активизирован текущим событием. Попытка удалить обработчик с параметрами, не соответствующими ни одному из зарегистрированных обработчиков игнорируется. Пример:

document.removeEventListener("click", mouseClick, true);

4.11.3. Обработчики событий: интерфейс EventListener

Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Интерфейс EventListener соответствует обработчикам событий в DOM. Обработчик событий — это подпрограмма, которая вызывается всякий раз, когда происходит событие, для которого зарегистрирован данный обработчик. Активизация обработчика вызывается внутренним методом handleEvent:

Метод handleEvent

Синтаксис:  обработчик.handleEvent(evt)
Аргументы:  evt — выражение типа Event
Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Метод handleEvent вызывается в процессе обработки события evt. Пример обработчика события приведен в описании метода addEventListener.

4.11.4. Обработчики событий HTML 4.0

В HTML 4.0 обработчики событий задаются как атрибуты соответствующих элементов, например:

<BODY onclick="mouseClick()">

При таком подходе задание нового обработчика события заменяет его старый обработчик. DOM допускает регистрацию нескольких обработчиков для одного события, поэтому в нем произошел отказ от задания обработчиков в атрибутах. Однако, в целях совместимости все действующие реализации DOM поддерживают форму регистрации обработчиков событий в синтаксисе HTML. Она считается совпадающей с заданием обработчика методом addEventListener с аргументом useCapture, равным false. Например, приведенное выше задание обработчика событий эквивалентно оператору

document.body.addEventListener("click", mouseClick, false);

DOM не предусматривает доступа к контексту события для обработчиков прерываний, заданных через атрибуты элементов. Однако, в Gecko в момент вызова обработчика события создается объект event, соответствующий интерфейсу Event для данного события. Пример:

function checkKey(evt) {
  var key = evt.which;  // код нажатой клавиши
  ...
}

<BODY onkeydown="checkKey(event)">

Перечень событий HTML приведен в п. 4.11.10.

4.11.5. События: интерфейс Event

Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

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

Свойства интерфейса Event
Свойство Изменяемое Модель Описание
bubbles Нет DOM 2 Просачивается ли данное событие.
cancelable Нет DOM 2 Отменяемо ли данное событие.
currentTarget Нет DOM 2 Узел, чьи обработчики событий сейчас активизируются.
eventPhase Нет DOM 2 Текущая фаза обработки события.
target Нет DOM 2 Узел, являющийся целью события.
timeStamp Нет DOM 2 Время генерации события.
type Нет DOM 2 Имя события.
Методы интерфейса Event
Метод Модель Описание
initEvent DOM 2 Инициализирует событие.
preventDefault DOM 2 Отменяет обработку события по умолчанию.
stopPropagation DOM 2 Прекращает дальнейшее распространение события.

Свойство bubbles

Синтаксис:  событие.bubbles
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство bubbles возвращает true, если данное событие является просачивающимся, и false в противном случае.

Свойство cancelable

Синтаксис:  событие.cancelable
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство cancelable возвращает true, если данное событие является отменяемым, и false в противном случае.

Свойство currentTarget

Синтаксис:  событие.currentTarget
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство currentTarget возвращает объект EventTarget, соответствующий узлу, чьи обработчики событий сейчас активизируются. Это свойство особенно полезно при перехвате и просачивании событий.

Свойство eventPhase

Синтаксис:  событие.eventPhase
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство eventPhase возвращает текущую фазу обработки события, которая задается целым числом в соответствии со следующей таблицей:

Название Значение Описание
CAPTURING_PHASE 1 Фаза обработки перехвата события.
AT_TARGET 2 Фаза активизации перехватчиков события узла.
BUBBLING_PHASE 3 Фаза обработки просачивания события.

Свойство target

Синтаксис:  событие.target
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство target возвращает объект EventTarget, соответствующий узлу, для которого это событие было сгенерировано.

Свойство timeStamp

Синтаксис:  событие.timeStamp
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

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

Свойство type

Синтаксис:  событие.type
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство type возвращает название данного события в формате DOMString. Это название должно быть именем языка XML, не зависящим от регистра, но и MSHTML, и Gecko возвращают название события строчными буквами, например: "click", "keydown", "resize".

Метод initEvent

Синтаксис:  узел.initEvent(eventType, canBubble, isCancelable)
Аргументы:  eventType — выражение типа DOMString
            canBubble, isCancelable — логические выражения
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Метод initEvent используется для инициализации параметров события, созданного методом createEvent. Он должен вызываться до того, как данное событие будет сгенерировано методом dispatchEvent, и изменяет только те параметры события, которые задаются его аргументами. Аргумент eventType задает название данного события в формате DOMString; это название должно быть именем языка XML. Аргументы canBubble и isCancelable указывают соответственно, является ли данное событие просачивающимся и отменяемым.

Метод preventDefault

Синтаксис:  узел.preventDefault()
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

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

Метод stopPropagation

Синтаксис:  узел.stopPropagation()
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

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

4.11.6. События пользовательского интерфейса: интерфейс UIEvent

Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

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

Свойства интерфейса UIEvent
Свойство Изменяемое Модель Описание
detail Нет DOM 2 Дополнительные сведения о событии.
view Нет DOM 2 Окно отображения документа.
Методы интерфейса UIEvent
Метод Модель Описание
initUIEvent DOM 2 Инициализирует событие.

Свойство detail

Синтаксис:  событие.detail
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

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

Свойство view

Синтаксис:  событие.view
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство view возвращает указатель на объект AbstractView, соответствующий окну отображения документа, в котором сгенерировано данное событие.

Метод initUIEvent

Синтаксис:  узел.initUIEvent(eventType, canBubble, isCancelable, view, detail)
Аргументы:  eventType — выражение типа DOMString
            canBubble, isCancelable — логические выражения
            view — выражение типа AbstractView
            detail — числовое выражение
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод initUIEvent используется для инициализации параметров события пользовательского интерфейса, созданного методом createEvent. Он должен вызываться до того, как данное событие будет сгенерировано методом dispatchEvent, и изменяет только те параметры события, которые задаются его аргументами. Аргумент eventType задает название данного события в формате DOMString; это название должно быть именем языка XML. Аргументы canBubble и isCancelable указывают соответственно, является ли данное событие просачивающимся и отменяемым. Аргумент view задает окно отображения документа, а аргумент detail — дополнительные сведения о событии.

Типы событий пользовательского интерфейса

DOM 2 определяет три типа событий пользовательского интерфейса (которые пока обозревателями не поддерживаются):

DOMFocusIn
Это событие генерируется, когда объект получает фокус (например, при наведении на него курсора мыши или при попадании на него последовательными нажатиями клавиши Tab). Оно аналогично событию focus в HTML, но применимо к любым объектам, способным получать фокус, а не только к управляющим элементам форм.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
DOMFocusOut
Это событие генерируется, когда объект теряет фокус (например, при удалении с него курсора мыши или при уходе с него нажатием клавиши Tab). Оно аналогично событию blur в HTML, но применимо к любым объектам, способным получать фокус, а не только к управляющим элементам форм.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
DOMActivate
Это событие генерируется при активизации элемента (например, щелчком мыши или нажатием клавиши). Способ активизации указывается в свойстве detail: 1 означает обычную активизацию (одинарный щелчок мыши или нажатие клавиши Enter), 2 означает гиперактивизацию (двойной щелчок мыши или нажатие Shift+Enter).
  • bubbles: true;
  • cancelable: true;
  • контекст: detail.

4.11.7. События мыши: интерфейс MouseEvent

Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Интерфейс MouseEvent является производным от интерфейса UIEvent и содержит дополнительную информацию о событиях, генерируемых мышью.

Свойства интерфейса MouseEvent
Свойство Изменяемое Модель Описание
altKey Нет DOM 2 Состояние клавиши Alt.
button Нет DOM 2 Номер кнопки мыши, изменившей состояние.
clientX Нет DOM 2 Горизонтальная координата события в клиентской области.
clientY Нет DOM 2 Вертикальная координата события в клиентской области.
ctrlKey Нет DOM 2 Состояние клавиши Ctrl.
metaKey Нет DOM 2 Состояние клавиши Meta.
relatedTarget Нет DOM 2 Вторичная цель события.
screenX Нет DOM 2 Горизонтальная координата события на экране.
screenY Нет DOM 2 Вертикальная координата события на экране.
shiftKey Нет DOM 2 Состояние клавиши Shift.
Методы интерфейса MouseEvent
Метод Модель Описание
initMouseEvent DOM 2 Инициализирует событие.

Свойство altKey

Синтаксис:  событие.altKey
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство altKey возвращает true, если в момент генерации события была нажата клавиша Alt, и false в противном случае.

Свойство button

Синтаксис:  событие.button
Изменяемое: нет
Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Свойство button возвращает номер кнопки мыши, нажатие или отпускание которой вызвало генерацию события. При этом 0 означает левую кнопку, 1 — среднюю кнопку, 2 — правую кнопку. Если мышь сконфигурирована для левой руки, то значения этого свойства присваиваются в обратном порядке.

Свойство clientX

Синтаксис:  событие.clientX
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство clientX возвращает число, равное горизонтальной координате точки, в которой произошла генерация события, относительно клиентской области обозревателя.

Свойство clientY

Синтаксис:  событие.clientY
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство clientY возвращает число, равное вертикальной координате точки, в которой произошла генерация события, относительно клиентской области обозревателя.

Свойство ctrlKey

Синтаксис:  событие.ctrlKey
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство ctrlKey возвращает true, если в момент генерации события была нажата клавиша Ctrl, и false в противном случае.

Свойство metaKey

Синтаксис:  событие.metaKey
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство metaKey возвращает true, если в момент генерации события была нажата клавиша Meta, и false в противном случае.

Свойство relatedTarget

Синтаксис:  событие.relatedTarget
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство relatedTarget возвращает вторичный объект EventTarget, связанный с данным событием. В настоящее время этот атрибут используется в событии mouseover для указания узла, который курсор мыши покинул, и в событии mouseout для указания узла, на который курсор мыши попал.

Свойство screenX

Синтаксис:  событие.screenX
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство screenX возвращает число, равное горизонтальной координате точки, в которой произошла генерация события, относительно экрана.

Свойство screenY

Синтаксис:  событие.screenY
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство screenY возвращает число, равное вертикальной координате точки, в которой произошла генерация события, относительно экрана.

Свойство shiftKey

Синтаксис:  событие.shiftKey
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство shiftKey возвращает true, если в момент генерации события была нажата клавиша Shift, и false в противном случае.

Метод initMouseEvent

Синтаксис:  узел.initMouseEvent(eventType, canBubble, isCancelable, view, detail,
                                screenX, screenY, clientX, clientY, ctrlKey, altKey,
                                shiftKey, metaKey, button, relatedTarget)
Аргументы:  eventType — выражение типа DOMString
            canBubble, isCancelable — логические выражения
            view — выражение типа AbstractView
            detail, screenX, screenY, clientX, clientY, button — числовые выражения
            ctrlKey, altKey, shiftKey, metaKey — логические выражения
            relatedTarget — выражение типа EventTarget
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод initMouseEvent используется для инициализации параметров события мыши, созданного методом createEvent. Он должен вызываться до того, как данное событие будет сгенерировано методом dispatchEvent, и изменяет только те параметры события, которые задаются его аргументами. Аргумент eventType задает название данного события в формате DOMString; это название должно быть именем языка XML. Аргументы canBubble и isCancelable указывают соответственно, является ли данное событие просачивающимся и отменяемым. Аргумент view задает окно отображения документа, аргумент detail — количество щелчков мыши, а остальные аргументы задают значения одноименных свойств события.

Типы событий мыши

DOM 2 определяет следующие типы событий мыши:

click
Это событие генерируется при щелчке мышью на элементе. Щелчок определяется как нажатие и отпускание кнопки мыши на одной и той же точке экрана. Соответствующая последовательность генерируемых событий: mousedown, mouseup, click. При двойном или множественном щелчке в одной точке количество щелчков заносится в свойство события detail. Это событие применимо к большинству элементов.
  • bubbles: true;
  • cancelable: true;
  • контекст: screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, button, detail.
mousedown
Это событие генерируется при нажатии кнопки мыши на элементе. Это событие применимо к большинству элементов.
  • bubbles: true;
  • cancelable: true;
  • контекст: screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, button, detail.
mouseup
Это событие генерируется при отпускании кнопки мыши на элементе. Это событие применимо к большинству элементов.
  • bubbles: true;
  • cancelable: true;
  • контекст: screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, button, detail.
mouseover
Это событие генерируется при попадании курсора мыши на элемент. Это событие применимо к большинству элементов.
  • bubbles: true;
  • cancelable: true;
  • контекст: screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, relatedTarget (элемент, который курсор мыши покинул).
mouseout
Это событие генерируется при покидании курсором мыши элемента. Это событие применимо к большинству элементов.
  • bubbles: true;
  • cancelable: true;
  • контекст: screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, relatedTarget (элемент, на который курсор мыши попал).
mousemove
Это событие генерируется при движении курсора мыши по элементу. Это событие применимо к большинству элементов.
  • bubbles: true;
  • cancelable: false;
  • контекст: screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey.

4.11.8. События клавиатуры: интерфейс KeyEvent

Поддержка: Internet Explorer Нестандартная.
           Gecko Нестандартная.

Интерфейс KeyEvent является производным от интерфейса UIEvent и содержит дополнительную информацию о событиях, генерируемых клавиатурой. DOM 2 не содержит спецификации этого интерфейса, она будет включена в DOM 3. Поэтому здесь мы приводим описание реализации интерфейса KeyEvent в Gecko (см. "Key Events in SeaMonkey").

Свойства интерфейса KeyEvent
Свойство Изменяемое Модель Описание
altKey Нет DOM 2 Состояние клавиши Alt.
charCode Нет DOM 2 Код Unicode клавиши.
ctrlKey Нет DOM 2 Состояние клавиши Ctrl.
keyCode Нет DOM 2 Виртуальный код клавиши.
metaKey Нет DOM 2 Состояние клавиши Meta.
shiftKey Нет DOM 2 Состояние клавиши Shift.

Свойство charCode

Синтаксис:  событие.charCode
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство charCode действительно только для события keypress. Если нажатая клавиша соответствует символу Unicode, то данное свойство возвращает код этого символа. Если же клавиша является служебной или событие отлично от keypress, то возвращается 0.

Свойство keyCode

Синтаксис:  событие.keyCode
Изменяемое: нет
Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Свойство keyCode возвращает виртуальный код клавищи, вызвавшей событие, или 0, если charCode не равно нулю. Список виртуальных кодов клавиш содержится в Таблице П18.1.

Типы событий клавиатуры

Клавиатура всегда генерирует три отдельных события: keydown (нажатие клавиши), keypress (удержание нажатой клавиши) и keyup (отпускание клавиши). Длительное нажатие клавиши приводит к тому, что событие keypress генерируется многократно.

keydown
Генерируется при нажатии клавиши. Виртуальный код клавиши заносится в keyCode, charCode обнуляется. Это событие применимо к большинству элементов.
  • bubbles: true;
  • cancelable: true;
  • контекст: altKey, ctrlKey, shiftKey, metaKey, keyCode.
keypress
Генерируется при удержании нажатой клавиши. Свойства keyCode и charCode формируются как описано выше. Это событие применимо к большинству элементов.
  • bubbles: true;
  • cancelable: true;
  • контекст: altKey, ctrlKey, shiftKey, metaKey, keyCode, charCode.
keyup
Генерируется при отпускании клавиши. Виртуальный код клавиши заносится в keyCode, charCode обнуляется. Это событие применимо к большинству элементов.
  • bubbles: true;
  • cancelable: true;
  • контекст: altKey, ctrlKey, shiftKey, metaKey, keyCode.

4.11.9. События изменения документа: интерфейс MutationEvent

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

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

Свойства интерфейса MutationEvent
Свойство Изменяемое Модель Описание
attrChange Нет DOM 2 Тип изменения атрибута.
attrName Нет DOM 2 Название изменившегося атрибута.
newValue Нет DOM 2 Новое значение атрибута или текста.
prevValue Нет DOM 2 Старое значение атрибута или текста.
relatedNode Нет DOM 2 Вторичный узел, связанный с событием.
Методы интерфейса MutationEvent
Метод Модель Описание
initMutationEvent DOM 2 Инициализирует событие.

Свойство attrChange

Синтаксис:  событие.attrChange
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство attrChange возвращает тип изменения атрибута для события DOMAttrModified. Тип изменения атрибута задается целым числом в соответствии со следующей таблицей:

Название Значение Описание
MODIFICATION 1 Изменено значение атрибута.
ADDITION 2 Добавлен новый атрибут.
REMOVAL 3 Удален атрибут.

Свойство attrName

Синтаксис:  событие.attrName
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство attrName возвращает строку, содержащую название изменившегося атрибута для события DOMAttrModified.

Свойство newValue

Синтаксис:  событие.newValue
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство newValue возвращает строку, содержащую новое значение узла Attr для события DOMAttrModified или новое значение узла CharacterData для события DOMCharacterDataModified.

Свойство prevValue

Синтаксис:  событие.prevValue
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство prevValue возвращает строку, содержащую предыдущее значение узла Attr для события DOMAttrModified или предыдущее значение узла CharacterData для события DOMCharacterDataModified.

Свойство relatedNode

Синтаксис:  событие.relatedNode
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

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

Метод initMutationEvent

Синтаксис:  узел.initMutationEvent(eventType, canBubble, isCancelable, relatedNode,
                                   prevValue, newValue, attrName, attrChange)
Аргументы:  eventType, prevValue, newValue, attrName — выражения типа DOMString
            canBubble, isCancelable — логические выражения
            relatedNode — выражение типа Node
            attrChange — числовое выражение
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод initMutationEvent используется для инициализации параметров события изменения документа, созданного методом createEvent. Он должен вызываться до того, как данное событие будет сгенерировано методом dispatchEvent, и изменяет только те параметры события, которые задаются его аргументами. Аргумент eventType задает название данного события в формате DOMString; это название должно быть именем языка XML. Аргументы canBubble и isCancelable указывают соответственно, является ли данное событие просачивающимся и отменяемым. Остальные аргументы задают значения одноименных свойств события.

Типы событий изменения документа

DOM 2 определяет следующие типы событий изменения документа (которые обозревателями пока не поддерживаются):

DOMSubtreeModified
Это событие носит общий характер и может использоваться вместо конкретных событий, описанных далее. В зависимости от реализации оно может генерироваться либо после каждой модификации документа, либо после группы взаимосвязанных изменений. Целью этого события является наименьший общий предок узлов, подвергшихся модификации.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
DOMNodeInserted
Это событие генерируется после добавления нового узла в дерево документа. Его целью является новый узел.
  • bubbles: true;
  • cancelable: false;
  • контекст: relatedNode указывает на отца нового узла.
DOMNodeInsertedIntoDocument
Это событие генерируется после добавления нового узла в дерево документа либо непосредственной вставкой, либо вставкой поддерева, содержащего данный узел. При непосредственном добавлении узла перед этим событием генерируется DOMNodeInserted. Целью является новый узел.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
DOMNodeRemoved
Это событие генерируется перед удалением узла из дерева документа. Его целью является удаляемый узел.
  • bubbles: true;
  • cancelable: false;
  • контекст: relatedNode указывает на отца удаляемого узла.
DOMNodeRemovedFromDocument
Это событие генерируется перед удалением узла из дерева документа либо непосредственным удалением, либо удалением поддерева, содержащего данный узел. При непосредственном удалении узла перед этим событием генерируется DOMNodeRemoved. Целью является удаляемый узел.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
DOMAttrModified
Это событие генерируется при изменении атрибутов узла. Его целью является Node, чьи атрибуты изменились; relatedNode указывает на сооветствующий объект Attr.
  • bubbles: true;
  • cancelable: false;
  • контекст: relatedNode, prevValue, newValue, attrName, attrChange.
DOMCharacterDataModified
Это событие генерируется при изменении текстового содержимого узла. Его целью является изменившийся объект CharacterData.
  • bubbles: true;
  • cancelable: false;
  • контекст: prevValue, newValue.

4.11.10. События HTML

DOM 2 поддерживает следующие события HTML 4.0:

load
Это событие генерируется по завершении загрузки документа, всех фреймов в FRAMESET или элемента OBJECT.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
unload
Это событие генерируется по завершении выгрузки документа из окна или фрейма. Оно применимо к элементам BODY и FRAMESET.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
abort
Это событие происходит, если загрузка страницы была прервана до завершения загрузки графического образа. Оно применимо к элементу OBJECT.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
error
Это событие происходит, если произошла ошибка при загрузке графического образа или при выполнении сценария. Оно применимо к элементам OBJECT, BODY и FRAMESET.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
select
Это событие происходит, когда пользователь выделяет текст в текстовом поле. Оно применимо к элементам INPUT и TEXTAREA.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
change
Это событие происходит, когда управляющий элемент формы теряет фокус и его значение изменилось после получения им фокуса. Оно применимо к элементам INPUT, SELECT и TEXTAREA.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
submit
Это событие происходит при пересылке формы. Оно применимо только к элементу FORM.
  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
reset
Это событие происходит при инициализации формы. Оно применимо только к элементу FORM.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
focus
Это событие происходит, когда управляющий элемент формы получает фокус. Оно применимо к элементам INPUT, SELECT, TEXTAREA, BUTTON и LABEL.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
blur
Это событие происходит, когда управляющий элемент формы теряет фокус. Оно применимо к элементам INPUT, SELECT, TEXTAREA, BUTTON и LABEL.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
resize
Это событие происходит при изменении размеров окна обозревателя.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
scroll
Это событие происходит при прокрутке окна обозревателя.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.