Глава 4.11. Обработка событий в dom
4.11.1. Основные понятия
4.11.1.1. Генерация и распространение событий
В этой главе мы описываем модель обработки событий, принятую в DOM 2. Именно реакция на внешние события делает документы динамическими, поэтому методы и свойства, описанные в этой главе, служат клеем, соединяющим описанные ранее элементы DOM в единое и живое целое, реагирующее на различные события. Начнем с самого понятия событие. Все события в DOM 2 подразделяются на следующие:
Аппаратные события пользовательского интерфейса. Это события, вызванные взаимодействием пользователя с устройствами ввода-вывода (нажатие клавиши, движение мыши и т. п.)
Логические события пользовательского интерфейса. Это события, не связанные с внешними устройствами, например, получение от операционной системы сообщения о смене фокуса.
События, генерируемые изменением структуры документа, например, добавление нового элемента.
Модель событий DOM 2 пока реализована только в Gecko. Internet Explorer имеет свою модель генерации и обработки событий, которая описана в гл. 4.12.
О различиях в обработке событий этими обозревателями см. 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
Поддержка: Не поддерживается.
Соответствует стандарту.
Интерфейс EventTargetреализуется всеми узлами документа, которые поддерживают обработку событий. Иными словами, его методы являются дополнительными методами объектовNode.
|
Методы интерфейса EventTarget | ||
|
Метод |
Модель |
Описание |
|
addEventListener |
DOM 2 |
Регистрирует обработчик события. |
|
dispatchEvent |
DOM 2 |
Генерирует заданное событие. |
|
removeEventListener |
DOM 2 |
Удаляет обработчик события. |
Метод addEventListener
Синтаксис: узел.addEventListener(type, listener, useCapture)
Аргументы: type — выражение типаDOMString
listener — выражение типа EventListener
useCapture — логическое выражение
Поддержка: Не поддерживается.
Соответствует стандарту.
Метод 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
Поддержка: Не поддерживается.
Соответствует стандарту.
Метод 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 — логическое выражение
Поддержка: Не поддерживается.
Соответствует стандарту.
Метод removeEventListenerудаляет обработчик события для данного узла. Аргументыlistener,typeиuseCaptureимеют тот же смысл, что в методеaddEventListener. Если обработчик удаляется во время обработки события, то он уже не будет активизирован текущим событием. Попытка удалить обработчик с параметрами, не соответствующими ни одному из зарегистрированных обработчиков игнорируется. Пример:
document.removeEventListener("click", mouseClick, true);
4.11.3. Обработчики событий: интерфейс EventListener
Поддержка: Нестандартная.
Соответствует стандарту.
Интерфейс EventListenerсоответствует обработчикам событий в DOM. Обработчик событий — это подпрограмма, которая вызывается всякий раз, когда происходит событие, для которого зарегистрирован данный обработчик. Активизация обработчика вызывается внутренним методомhandleEvent:
Метод handleEvent
Синтаксис:обработчик.handleEvent(evt)
Аргументы: evt — выражение типаEvent
Поддержка: Нестандартная.
Соответствует стандарту.
Метод 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
Поддержка: Нестандартная.
Соответствует стандарту.
Интерфейс 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
Изменяемое: нет
Поддержка: Не поддерживается.
Соответствует стандарту.
Свойство bubblesвозвращаетtrue, если данное событие являетсяпросачивающимся, иfalseв противном случае.
Свойство cancelable
Синтаксис:событие.cancelable
Изменяемое: нет
Поддержка: Не поддерживается.
Соответствует стандарту.
Свойство cancelableвозвращаетtrue, если данное событие являетсяотменяемым, иfalseв противном случае.
Свойство currentTarget
Синтаксис:событие.currentTarget
Изменяемое: нет
Поддержка: Не поддерживается.
Соответствует стандарту.
Свойство currentTargetвозвращает объектEventTarget, соответствующий узлу, чьи обработчики событий сейчас активизируются. Это свойство особенно полезно при перехвате и просачивании событий.
Свойство eventPhase
Синтаксис:событие.eventPhase
Изменяемое: нет
Поддержка: Не поддерживается.
Соответствует стандарту.
Свойство eventPhaseвозвращает текущую фазу обработки события, которая задается целым числом в соответствии со следующей таблицей:
|
Название |
Значение |
Описание |
|
CAPTURING_PHASE |
1 |
Фаза обработки перехвата события. |
|
AT_TARGET |
2 |
Фаза активизации перехватчиков события узла. |
|
BUBBLING_PHASE |
3 |
Фаза обработки просачивания события. |
Свойство target
Синтаксис:событие.target
Изменяемое: нет
Поддержка: Не поддерживается.
Соответствует стандарту.
Свойство targetвозвращает объектEventTarget, соответствующий узлу, для которого это событие было сгенерировано.
Свойство timeStamp
Синтаксис:событие.timeStamp
Изменяемое: нет
Поддержка: Не поддерживается.
Соответствует стандарту.
Свойство timeStampвозвращает объектDOMTimeStamp, соответствующий времени генерации данного события. Для некоторых операционных систем и типов событий это значение может быть недоступно; в таких случаях данное свойство должно возвращать 0.
Свойство type
Синтаксис:событие.type
Изменяемое: нет
Поддержка: Соответствует стандарту.
Соответствует стандарту.
Свойство typeвозвращает название данного события в форматеDOMString. Это название должно бытьименем языка XML, не зависящим от регистра, но и MSHTML, и Gecko возвращают название события строчными буквами, например: "click", "keydown", "resize".
Метод initEvent
Синтаксис: узел.initEvent(eventType, canBubble, isCancelable)
Аргументы: eventType — выражение типа DOMString
canBubble, isCancelable — логические выражения
Поддержка: Не поддерживается.
Соответствует стандарту.
Метод initEventиспользуется для инициализации параметров события, созданного методомcreateEvent. Он должен вызываться до того, как данное событие будет сгенерировано методомdispatchEvent, и изменяет только те параметры события, которые задаются его аргументами. АргументeventTypeзадает название данного события в форматеDOMString; это название должно бытьименем языка XML. АргументыcanBubbleиisCancelableуказывают соответственно, является ли данное событиепросачивающимсяиотменяемым.
Метод preventDefault
Синтаксис:узел.preventDefault()
Поддержка: Не поддерживается.
Соответствует стандарту.
Метод preventDefaultсообщает системе, что нужно отменить обработку данного события, принятую по умолчанию. Если событие не являетсяотменяемым, то вызов этого метода игнорируется. Этот метод может быть вызван в любой фазе обработки события.
Метод stopPropagation
Синтаксис: узел.stopPropagation()
Поддержка: Не поддерживается.
Соответствует стандарту.
Метод stopPropagationсообщает системе, что нужно прекратить распространение данного события. После его вызова завершается активация обработчиков событий текущего узла, и дальнейшее распространение события не происходит. Этот метод может быть вызван в любой фазе обработки события.
4.11.6. События пользовательского интерфейса: интерфейс UIEvent
Поддержка: Не поддерживается.
Соответствует стандарту.
Интерфейс UIEventявляется производным от интерфейсаEventи содержит дополнительную информацию о событиях пользовательского интерфейса.
|
Свойства интерфейса UIEvent | |||
|
Свойство |
Изменяемое |
Модель |
Описание |
|
detail |
Нет |
DOM 2 |
Дополнительные сведения о событии. |
|
view |
Нет |
DOM 2 |
Окно отображения документа. |
|
Методы интерфейса UIEvent | ||
|
Метод |
Модель |
Описание |
|
initUIEvent |
DOM 2 |
Инициализирует событие. |
Свойство detail
Синтаксис:событие.detail
Изменяемое: нет
Поддержка: Не поддерживается.
Соответствует стандарту.
Свойство detailвозвращает число, содержащее дополнительные сведения о данном событии. Его значение зависит от типа события, как описано ниже.
Свойство view
Синтаксис:событие.view
Изменяемое: нет
Поддержка: Не поддерживается.
Соответствует стандарту.
Свойство viewвозвращает указатель на объектAbstractView, соответствующий окну отображения документа, в котором сгенерировано данное событие.
Метод initUIEvent
Синтаксис: узел.initUIEvent(eventType, canBubble, isCancelable, view, detail)
Аргументы: eventType — выражение типа DOMString
canBubble, isCancelable — логические выражения
view — выражение типа AbstractView
detail — числовое выражение
Поддержка: Не поддерживается.
Не поддерживается.
Метод 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
Поддержка: Не поддерживается.
Соответствует стандарту.
Интерфейс 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
Изменяемое: нет
Поддержка: Соответствует стандарту.
Соответствует стандарту.
Свойство altKeyвозвращаетtrue, если в момент генерации события была нажата клавиша Alt, иfalseв противном случае.
Свойство button
Синтаксис:событие.button
Изменяемое: нет
Поддержка: Нестандартная.
Соответствует стандарту.
Свойство buttonвозвращает номер кнопки мыши, нажатие или отпускание которой вызвало генерацию события. При этом 0 означает левую кнопку, 1 — среднюю кнопку, 2 — правую кнопку. Если мышь сконфигурирована для левой руки, то значения этого свойства присваиваются в обратном порядке.
Свойство clientX
Синтаксис:событие.clientX
Изменяемое: нет
Поддержка: Соответствует стандарту.
Соответствует стандарту.
Свойство clientXвозвращает число, равное горизонтальной координате точки, в которой произошла генерация события, относительно клиентской области обозревателя.
Свойство clientY
Синтаксис:событие.clientY
Изменяемое: нет
Поддержка: Соответствует стандарту.
Соответствует стандарту.
Свойство clientYвозвращает число, равное вертикальной координате точки, в которой произошла генерация события, относительно клиентской области обозревателя.
Свойство ctrlKey
Синтаксис:событие.ctrlKey
Изменяемое: нет
Поддержка: Соответствует стандарту.
Соответствует стандарту.
Свойство ctrlKeyвозвращаетtrue, если в момент генерации события была нажата клавиша Ctrl, иfalseв противном случае.
Свойство metaKey
Синтаксис:событие.metaKey
Изменяемое: нет
Поддержка: Не поддерживается.
Соответствует стандарту.
Свойство metaKeyвозвращаетtrue, если в момент генерации события была нажата клавиша Meta, иfalseв противном случае.
Свойство relatedTarget
Синтаксис:событие.relatedTarget
Изменяемое: нет
Поддержка: Не поддерживается.
Соответствует стандарту.
Свойство relatedTargetвозвращает вторичный объектEventTarget, связанный с данным событием. В настоящее время этот атрибут используется в событииmouseoverдля указания узла, который курсор мыши покинул, и в событииmouseoutдля указания узла, на который курсор мыши попал.
Свойство screenX
Синтаксис:событие.screenX
Изменяемое: нет
Поддержка: Соответствует стандарту.
Соответствует стандарту.
Свойство screenXвозвращает число, равное горизонтальной координате точки, в которой произошла генерация события, относительно экрана.
Свойство screenY
Синтаксис:событие.screenY
Изменяемое: нет
Поддержка: Соответствует стандарту.
Соответствует стандарту.
Свойство screenYвозвращает число, равное вертикальной координате точки, в которой произошла генерация события, относительно экрана.
Свойство shiftKey
Синтаксис:событие.shiftKey
Изменяемое: нет
Поддержка: Соответствует стандарту.
Соответствует стандарту.
Свойство 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
Поддержка: Не поддерживается.
Не поддерживается.
Метод 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
Поддержка: Нестандартная.
Нестандартная.
Интерфейс 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
Изменяемое: нет
Поддержка: Не поддерживается.
Соответствует стандарту.
Свойство charCodeдействительно только для событияkeypress. Если нажатая клавиша соответствует символу Unicode, то данное свойство возвращает код этого символа. Если же клавиша является служебной или событие отлично отkeypress, то возвращается 0.
Свойство keyCode
Синтаксис:событие.keyCode
Изменяемое: нет
Поддержка: Нестандартная.
Соответствует стандарту.
Свойство 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
Поддержка: Не поддерживается.
Не поддерживается.
Интерфейс MutationEventявляется производным от интерфейсаEventи содержит дополнительную информацию о событиях, порожденных изменением структуры документа.
|
Свойства интерфейса MutationEvent | |||
|
Свойство |
Изменяемое |
Модель |
Описание |
|
attrChange |
Нет |
DOM 2 |
Тип изменения атрибута. |
|
attrName |
Нет |
DOM 2 |
Название изменившегося атрибута. |
|
newValue |
Нет |
DOM 2 |
Новое значение атрибута или текста. |
|
prevValue |
Нет |
DOM 2 |
Старое значение атрибута или текста. |
|
relatedNode |
Нет |
DOM 2 |
Вторичный узел, связанный с событием. |
|
Методы интерфейса MutationEvent | ||
|
Метод |
Модель |
Описание |
|
initMutationEvent |
DOM 2 |
Инициализирует событие. |
Свойство attrChange
Синтаксис:событие.attrChange
Изменяемое: нет
Поддержка: Не поддерживается.
Не поддерживается.
Свойство attrChangeвозвращает тип изменения атрибута для событияDOMAttrModified. Тип изменения атрибута задается целым числом в соответствии со следующей таблицей:
|
Название |
Значение |
Описание |
|
MODIFICATION |
1 |
Изменено значение атрибута. |
|
ADDITION |
2 |
Добавлен новый атрибут. |
|
REMOVAL |
3 |
Удален атрибут. |
Свойство attrName
Синтаксис:событие.attrName
Изменяемое: нет
Поддержка: Не поддерживается.
Не поддерживается.
Свойство attrNameвозвращает строку, содержащую название изменившегося атрибута для событияDOMAttrModified.
Свойство newValue
Синтаксис:событие.newValue
Изменяемое: нет
Поддержка: Не поддерживается.
Не поддерживается.
Свойство newValueвозвращает строку, содержащую новое значение узлаAttrдля событияDOMAttrModifiedили новое значение узлаCharacterDataдля событияDOMCharacterDataModified.
Свойство prevValue
Синтаксис:событие.prevValue
Изменяемое: нет
Поддержка: Не поддерживается.
Не поддерживается.
Свойство prevValueвозвращает строку, содержащую предыдущее значение узлаAttrдля событияDOMAttrModifiedили предыдущее значение узлаCharacterDataдля событияDOMCharacterDataModified.
Свойство relatedNode
Синтаксис:событие.relatedNode
Изменяемое: нет
Поддержка: Не поддерживается.
Не поддерживается.
Свойство relatedNodeвозвращает указатель на объектNode, соответствующий вторичному узлу, связанному с данным событием. Какой именно узел является вторичным, зависит от события и описано ниже для каждого из событий.
Метод initMutationEvent
Синтаксис: узел.initMutationEvent(eventType, canBubble, isCancelable, relatedNode,
prevValue, newValue, attrName, attrChange)
Аргументы: eventType, prevValue, newValue, attrName — выражения типа DOMString
canBubble, isCancelable — логические выражения
relatedNode — выражение типа Node
attrChange — числовое выражение
Поддержка: Не поддерживается.
Не поддерживается.
Метод 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;
контекст: нет.