Документация DHTML
| Документация DHTML | Документация Smarty | SVG/VML Графика и JavaScript
| Документация bash |
Глава 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.
Метод | Модель | Описание |
---|---|---|
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.
Свойство | Изменяемое | Модель | Описание |
---|---|---|---|
bubbles | Нет | DOM 2 | Просачивается ли данное событие. |
cancelable | Нет | DOM 2 | Отменяемо ли данное событие. |
currentTarget | Нет | DOM 2 | Узел, чьи обработчики событий сейчас активизируются. |
eventPhase | Нет | DOM 2 | Текущая фаза обработки события. |
target | Нет | DOM 2 | Узел, являющийся целью события. |
timeStamp | Нет | DOM 2 | Время генерации события. |
type | Нет | DOM 2 | Имя события. |
Метод | Модель | Описание |
---|---|---|
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 и содержит дополнительную информацию о событиях пользовательского интерфейса.
Свойство | Изменяемое | Модель | Описание |
---|---|---|---|
detail | Нет | DOM 2 | Дополнительные сведения о событии. |
view | Нет | DOM 2 | Окно отображения документа. |
Метод | Модель | Описание |
---|---|---|
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 и содержит дополнительную информацию о событиях, генерируемых мышью.
Свойство | Изменяемое | Модель | Описание |
---|---|---|---|
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. |
Метод | Модель | Описание |
---|---|---|
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 (см.
Свойство | Изменяемое | Модель | Описание |
---|---|---|---|
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 и содержит дополнительную информацию о событиях, порожденных изменением структуры документа.
Свойство | Изменяемое | Модель | Описание |
---|---|---|---|
attrChange | Нет | DOM 2 | Тип изменения атрибута. |
attrName | Нет | DOM 2 | Название изменившегося атрибута. |
newValue | Нет | DOM 2 | Новое значение атрибута или текста. |
prevValue | Нет | DOM 2 | Старое значение атрибута или текста. |
relatedNode | Нет | DOM 2 | Вторичный узел, связанный с событием. |
Метод | Модель | Описание |
---|---|---|
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;
- контекст: нет.