События DOM - DOM events
Эта статья поднимает множество проблем. Пожалуйста помоги Улучши это или обсудите эти вопросы на страница обсуждения. (Узнайте, как и когда удалить эти сообщения-шаблоны) (Узнайте, как и когда удалить этот шаблон сообщения)
|
События DOM (объектной модели документа) действия, которые происходят в результате действия пользователя или в результате изменения состояния элементов ДОМ дерево. Сторона клиента языки сценариев, такие как JavaScript, JScript, ECMAScript, VBScript, и Ява может регистрировать различные обработчики событий или же слушатели на узлах элемента внутри ДОМ дерево, например, в HTML, XHTML, XUL, и SVG документы.
Примеры событий HTML DOM:
- Когда пользователь щелкает мышью
- Когда веб-страница загрузилась
- Когда изображение загружено
- Когда мышь перемещается по элементу
- Когда поле ввода изменено
- Когда отправляется HTML-форма
- Когда пользователь нажимает клавишу[1]
Исторически, как и DOM, модели событий, используемые различными веб-браузеры имел ряд существенных отличий. Это вызвало проблемы с совместимостью. Для борьбы с этим модель событий была стандартизирована Консорциум World Wide Web (W3C) в DOM уровня 2.
События
HTML события
Общие события
Существует огромная коллекция событий, которые могут быть сгенерированы большинством узлов элементов:
- Мышь События.[2][3]
- Клавиатура События.
- События HTML-фрейма / объекта.
- События HTML-формы.
- События пользовательского интерфейса.
- События мутации (уведомление о любых изменениях в структуре документа).
- События прогресса[4] (использован XMLHttpRequest, Файловый API,[5]).
Обратите внимание, что приведенная выше классификация событий не совсем такая же, как классификация W3C.
Категория | Тип | Атрибут | Описание | Пузыри | Отменяемый |
---|---|---|---|---|---|
Мышь | щелкнуть | по щелчку | Пожары, когда указывающее устройство кнопка нажата над элементом. Щелчок определяется как нажатие и наведение курсора на одно и то же место на экране. Последовательность этих событий такова:
| да | да |
dblclick | ondblclick | Срабатывает, когда кнопка указывающего устройства дважды щелкнул над элементом | да | да | |
мышь | onmousedown | Срабатывает при нажатии кнопки указывающего устройства над элементом | да | да | |
мышь | onmouseup | Срабатывает, когда кнопка указывающего устройства отпускается над элементом | да | да | |
наведение указателя мыши | при наведении курсора на | Срабатывает, когда указывающее устройство перемещается на элемент | да | да | |
мышь[6] | onmousemove | Срабатывает, когда указывающее устройство перемещается, когда оно находится над элементом | да | да | |
мышь | onmouseout | Срабатывает, когда указывающее устройство перемещается от элемента | да | да | |
перетащить | ondragstart | Выстреливается по элементу при запуске перетаскивания. | да | да | |
тащить | ondrag | Это событие запускается в источнике перетаскивания, то есть в элементе, из которого был запущен dragstart, во время операции перетаскивания. | да | да | |
центр тяжести | ондрагентер | Срабатывает, когда мышь впервые перемещается по элементу во время перетаскивания. | да | да | |
драглев | Ondragleave | Это событие запускается, когда мышь покидает элемент во время перетаскивания. | да | Нет | |
Перетащите над | ондраговер | Это событие запускается, когда мышь перемещается по элементу при перетаскивании. | да | да | |
уронить | капля | Событие перетаскивания запускается для элемента, в котором происходит перетаскивание в конце операции перетаскивания. | да | да | |
драгенд | ондрагенд | Источник перетаскивания получит событие dragend, когда операция перетаскивания будет завершена, независимо от того, была она успешной или нет. | да | Нет | |
Клавиатура | keydown | onkeydown | Срабатывает перед нажатием клавиши при нажатии клавиши на клавиатуре. | да | да |
нажатие клавиши | onkeypress | Срабатывает после нажатия клавиши при нажатии клавиши на клавиатуре. | да | да | |
клавиатура | onkeyup | Срабатывает при отпускании клавиши на клавиатуре | да | да | |
HTML-фрейм /объект | нагрузка | в процессе | Пожары, когда пользовательский агент завершает загрузку всего содержимого в документе, включая окно, фреймы, объекты и изображения Для элементов он срабатывает, когда целевой элемент и все его содержимое завершают загрузку. | Нет | Нет |
разгрузить | onunload | Срабатывает, когда пользовательский агент удаляет весь контент из окна или фрейма Для элементов он срабатывает, когда целевой элемент или любое его содержимое было удалено. | Нет | Нет | |
прервать | onabort | Срабатывает, когда объект / изображение останавливается от загрузки до полной загрузки | да | Нет | |
ошибка | ошибка | Срабатывает, когда объект / изображение / кадр не могут быть загружены должным образом | да | Нет | |
изменить размер | onresize | Срабатывает при изменении размера представления документа | да | Нет | |
прокрутка | прокрутка | Срабатывает при прокрутке элемента или представления документа | Нет, за исключением того, что событие прокрутки в документе должно всплывать в окно[7] | Нет | |
HTML-форма | Выбрать | onselect | Срабатывает, когда пользователь выделяет текст в текстовое поле, включая ввод и текстовое поле | да | Нет |
изменять | по изменению | Срабатывает, когда элемент управления теряет вход фокус и его значение было изменено с момента сосредоточения | да | Нет | |
Разместить | onsubmit | Срабатывает при отправке формы | да | да | |
перезагрузить | начало | Срабатывает при сбросе формы | да | Нет | |
фокус | onfocus | Срабатывает, когда элемент получает фокус либо через указывающее устройство, либо вкладка навигации | Нет | Нет | |
размытие | onblur | Срабатывает, когда элемент теряет фокус через указывающее устройство или табуляция навигации | Нет | Нет | |
Пользовательский интерфейс | сосредоточиться | (никто) | Подобно событию фокуса HTML, но может применяться к любому элементу, на который можно сфокусироваться | да | Нет |
фокус | (никто) | Подобно событию размытия HTML, но может применяться к любому фокусируемому элементу | да | Нет | |
DOMActivate | (никто) | Подобно командному событию XUL. Срабатывает, когда элемент активируется, например, щелчком мыши или нажатием клавиши. | да | да | |
Мутация | DOMSubtreeModified | (никто) | Срабатывает при изменении поддерева | да | Нет |
DOMNodeInserted | (никто) | Срабатывает, когда узел был добавлен как дочерний по отношению к другому узлу | да | Нет | |
DOMNodeRemoved | (никто) | Срабатывает, когда узел был удален из DOM-дерева | да | Нет | |
DOMNodeRemovedFromDocument | (никто) | Срабатывает, когда узел удаляется из документа | Нет | Нет | |
DOMNodeInsertedIntoDocument | (никто) | Срабатывает, когда узел вставляется в документ | Нет | Нет | |
DOMAttrModified | (никто) | Срабатывает, когда атрибут был изменен | да | Нет | |
DOMCharacterDataModified | (никто) | Срабатывает, когда данные персонажа были изменены | да | Нет | |
Прогресс | loadstart | (никто) | Прогресс начался. | Нет | Нет |
прогресс | (никто) | В ходе выполнения. После отправки loadstart. | Нет | Нет | |
ошибка | (никто) | Прогресс не удался. После отправки последнего прогресса или после отправки loadstart, если прогресс не был отправлен. | Нет | Нет | |
прервать | (никто) | Прогресс прекращен. После отправки последнего прогресса или после отправки loadstart, если прогресс не был отправлен. | Нет | Нет | |
нагрузка | (никто) | Прогресс успешный. После отправки последнего прогресса или после отправки loadstart, если прогресс не был отправлен. | Нет | Нет | |
загружаемый | (никто) | Прогресс остановился. После отправки сообщения об ошибке, прерывании или загрузке. | Нет | Нет |
Обратите внимание, что события, имена которых начинаются с «DOM», в настоящее время не поддерживаются должным образом, и по этой и другим причинам производительности они не рекомендуются W3C в DOM Level 3. Mozilla и Опера поддерживать DOMAttrModified, DOMNodeInserted, DOMNodeRemoved и DOMCharacterDataModified. Хром и Сафари поддержать эти мероприятия, кроме DOMAttrModified.
Сенсорные события
Веб-браузеры, работающие на сенсорный устройства, такие как Apple iOS и Google Android, генерировать дополнительные события.[8]:§5.3
Категория | Тип | Атрибут | Описание | Пузыри | Отменяемый |
---|---|---|---|---|---|
Трогать | Touchstart | Срабатывает при касании пальцем сенсорной поверхности / экрана. | да | да | |
прикосновение | Срабатывает, когда палец убирается с сенсорной поверхности / экрана. | да | да | ||
Touchmove | Срабатывает, когда палец, уже находящийся на экране, перемещается по экрану. | да | да | ||
внимательный | Срабатывает, когда точка касания перемещается в интерактивную область, определенную элементом DOM. | да | да | ||
коснуться | Срабатывает, когда точка касания перемещается за пределы интерактивной области, определенной элементом DOM. | да | да | ||
touchcancel | А пользовательский агент должен отправлять этот тип события, чтобы указать, когда TouchPoint был нарушен специфическим для реализации способом, например, при выходе за пределы окна UA. Пользовательский агент также может отправлять этот тип события, когда пользователь помещает больше точек касания (координатная точка, в которой указатель (например, палец или стилус) пересекает целевую поверхность интерфейса) на сенсорной поверхности, чем устройство или реализация настроены для store, и в этом случае следует удалить самый ранний объект TouchPoint в TouchList.[8]:§5.9 | да | Нет |
в W3C проект рекомендации, a TouchEvent
доставляет TouchList
из Трогать
места, клавиши-модификаторы которые были активны, TouchList
из Трогать
местоположения в целевом элементе DOM и TouchList
из Трогать
места, которые изменились с момента предыдущего TouchEvent
.[8]
яблоко не присоединился к этой рабочей группе и отложил рекомендацию W3C своей спецификации Touch Events, раскрывая патенты поздно в процессе рекомендации.[9]
Указатель событий[10]
Веб-браузеры на устройствах с различными типами устройств ввода, включая мышь, сенсорную панель и перо, могут генерировать интегрированные события ввода. Пользователи могут видеть, какой тип устройства ввода нажат, какая кнопка нажата на этом устройстве и насколько сильно нажата кнопка, когда дело касается стилуса. По состоянию на октябрь 2013 года это событие поддерживается только Internet Explorer 10 и 11.
Категория | Тип | Атрибут | Описание | Пузыри | Отменяемый |
---|---|---|---|---|---|
Указатель | указатель вниз | onpointerdown | Срабатывает, когда кнопка указывающего устройства активируется или нажимается на элемент. | да | да |
указатель | onpointerup | Срабатывает, когда кнопка указывающего устройства отпускается над элементом | да | да | |
указательотмена | onpointercancel | Срабатывает, когда указывающее устройство вряд ли продолжит генерировать событие, потому что, например, устройство используется для панорамирования / масштабирования после события указателя вниз. | да | да | |
указатель | onpointermove | Срабатывает, когда указывающее устройство перемещается, когда оно находится над элементом | да | да | |
указатель | onpointerover | Срабатывает, когда указывающее устройство перемещается на элемент | да | да | |
указатель | onpointerout | Срабатывает, когда указывающее устройство перемещается от элемента. Также срабатывает после наведения указателя без наведения указателя или после | да | да | |
указатель | onpointerenter | Срабатывает, когда указывающее устройство перемещается на элемент или когда кнопка указывающего устройства, не поддерживающего наведение, нажимается на одном из его дочерних элементов. | Нет | да | |
указатель | onpointerleave | Срабатывает, когда указывающее устройство перемещается от элемента, или когда кнопка указывающего устройства, которое не поддерживает наведение, отпускается над его дочерними элементами. | Нет | да | |
gotpointercapture | ongotpointercapture | Срабатывает, когда указатель захватывается методом setPointerCapture. | да | Нет | |
потерянная точка | onlostpointercapture | Срабатывает, когда указатель освобождается методом releasePointerCapture. | да | Нет |
Инди UI события[11]
Еще не реализованные, рабочие группы Indie UI хотят помочь разработчикам веб-приложений иметь возможность поддерживать стандартные события взаимодействия с пользователем без необходимости обрабатывать различные технические события, специфичные для платформы, которые могут совпадать с ними.
Создание сценариев используемых интерфейсов может быть трудным, особенно если учесть, что шаблоны проектирования пользовательского интерфейса различаются в зависимости от программных платформ, оборудования и локалей, и что эти взаимодействия могут быть дополнительно настроены в зависимости от личных предпочтений. Люди привыкли к тому, как интерфейс работает в их собственной системе, и их предпочтительный интерфейс часто отличается от предпочтительного интерфейса автора веб-приложения.
Например, авторы веб-приложений, желающие перехватить намерение пользователя отменить последнее действие, должны «прослушивать» все следующие события:
- Control + Z в Windows и Linux.
- Command + Z в Mac OS X.
- События встряхивания на некоторых мобильных устройствах.
Было бы проще прослушать один нормализованный запрос, чтобы «отменить» предыдущее действие.
Категория | Тип | Описание | Пузыри | Отменяемый |
---|---|---|---|---|
Запрос | аннулировать запрос | Указывает, что пользователь желает «отменить» предыдущее действие. (Может быть заменен интерфейсом UndoManager.) | да | да |
повторный запрос | Указывает, что пользователь желает «повторить» ранее «отмененное» действие. (Может быть заменен интерфейсом UndoManager.) | да | нет | |
expandrequest | Указывает, что пользователь желает раскрыть информацию в свернутом разделе (например, в виджете раскрытия) или узле ветвления в иерархии (например, в виде дерева). | да | да | |
свернуть запрос | Указывает, что пользователь желает скрыть или свернуть информацию в развернутом разделе (например, виджете раскрытия) или узле ветвления в иерархии (например, в виде дерева). | да | да | |
отклонить запрос | Указывает, что пользователь желает «отклонить» текущий вид (например, отменить диалог или закрыть всплывающее меню). | да | да | |
deleterequest | Указывает, что пользователь хочет инициировать действие «удалить» для отмеченного элемента или текущего представления. | да | да | |
Запрос на фокус | направленный | Инициируется, когда пользовательский агент отправляет веб-приложению запрос «направленного фокуса». Веб-авторы не должны использовать или регистрироваться для событий directionalfocusrequest, когда достаточно стандартных событий фокуса браузера и размытия. Использование этих событий без необходимости может привести к снижению производительности или негативному восприятию пользователем. | да | да |
linearfocusrequest | Инициируется, когда пользовательский агент отправляет веб-приложению запрос "линейного фокуса". Веб-авторы не должны использовать или регистрироваться для событий linearfocusrequest, когда достаточно стандартных событий фокусировки браузера и размытия. Этот тип события необходим только для специализированных типов элементов управления, таких как сетки данных, где следующий логический элемент может быть недоступен для фокусировки или даже в DOM, пока не будет запрошен. Использование этих событий без необходимости может привести к снижению производительности или негативному восприятию пользователя. | да | да | |
palettefocusrequest | Инициируется, когда пользовательский агент отправляет веб-приложению запрос "фокуса палитры". Авторы веб-приложений, получившие это событие, должны переместить фокус на первую палитру в веб-приложении или переключить фокус между всеми доступными палитрами. Примечание: палитры иногда называют немодальными диалоговыми окнами или окнами инспектора. | да | да | |
панель инструментов | Инициируется, когда пользовательский агент отправляет веб-приложению запрос "фокуса панели инструментов". Авторы веб-приложений, получающие это событие, должны переместить фокус на главную панель инструментов веб-приложения или переключить фокус между всеми доступными панелями инструментов. | да | да | |
Запрос на манипуляцию | moverequest | Инициируется, когда пользовательский агент отправляет веб-приложению запрос на перемещение с соответствующими значениями дельты x / y. Это используется, например, при перемещении объекта в новое место на холсте макета. | да | да |
панреквест | Инициируется, когда пользовательский агент отправляет запрос панорамирования в веб-приложение с соответствующими значениями дельты x / y. Это используется, например, при изменении центральной точки при панорамировании карты или другой пользовательской программы просмотра изображений. | да | да | |
запрос вращения | Инициируется, когда пользовательский агент отправляет запрос вращения в веб-приложение с соответствующими значениями исходных координат x / y и значением поворота в градусах. | да | да | |
zoomrequest | Инициируется, когда пользовательский агент отправляет запрос масштабирования в веб-приложение с соответствующими исходными значениями x / y и коэффициентом масштабирования. | да | да | |
Запрос на прокрутку | scrollrequest | Инициируется, когда пользовательский агент отправляет запрос прокрутки веб-приложению с соответствующими значениями дельты x / y или одним из других определенных значений scrollType. Авторам следует использовать это событие и интерфейс только с настраиваемыми представлениями прокрутки. | да | да |
Запрос ValueChange | valuechangerequest | Инициируется, когда пользовательский агент отправляет запрос на изменение значения в веб-приложение. Используется в настраиваемых элементах управления диапазоном, таких как слайдеры, карусели и т. Д. | да | да |
События, специфичные для Internet Explorer
В дополнение к обычным (W3C) событиям, два основных типа событий добавляются Internet Explorer. Некоторые мероприятия реализованы как стандарты де-факто другими браузерами.
- Буфер обмена События.
- События привязки данных.[требуется разъяснение ]
Категория | Тип | Атрибут | Описание | Пузыри | Отменяемый |
---|---|---|---|---|---|
Буфер обмена | резать | oncut | Срабатывает после того, как выделенная область помещена в буфер обмена. | да | да |
копировать | копия | Срабатывает после того, как выделенная область скопирована в буфер обмена. | да | да | |
вставить | паста | Срабатывает после вставки выделения из буфера обмена. | да | да | |
перед обрезкой | onbeforecut | Срабатывает до того, как выделенная область будет вырезана в буфере обмена. | да | да | |
перед копией | перед копией | Срабатывает перед копированием выделения в буфер обмена. | да | да | |
перед пастой | onbeforepaste | Срабатывает перед вставкой выделения из буфера обмена. | да | да | |
Связывание данных | последующее обновление | onafterupdate | Срабатывает сразу после обновления объекта с привязкой к данным. | да | Нет |
перед обновлением | onbeforeupdate | Срабатывает перед обновлением источника данных. | да | да | |
Cellchange | один раз | Срабатывает при изменении источника данных. | да | Нет | |
данные доступны | ondataavailable | Срабатывает, когда становятся доступными новые данные из источника данных. | да | Нет | |
набор данных изменен | ondatasetchanged | Срабатывает при изменении содержимого в источнике данных. | да | Нет | |
набор данных | ondatasetcomplete | Срабатывает, когда передача данных из источника данных завершена. | да | Нет | |
ошибка обновления | onerrorupdate | Срабатывает, если при обновлении поля данных возникает ошибка. | да | Нет | |
rowenter | onrowenter | Срабатывает, когда доступна новая строка данных из источника данных. | да | Нет | |
rowexit | onrowexit | Срабатывает, когда строка данных из источника данных только что закончилась. | Нет | да | |
строки удалить | onrowdelete | Срабатывает при удалении строки данных из источника данных. | да | Нет | |
вставленный | вставленный | Срабатывает, когда вставляется строка данных из источника данных. | да | Нет | |
Мышь | контекстное меню | oncontextmenu | Срабатывает при отображении контекстного меню. | да | да |
тащить | ondrag | Срабатывает, когда во время перетаскивание мышью (на движущемся элементе). | да | да | |
драгстарт | ondragstart | Срабатывает, когда начинается перетаскивание мышью (на движущемся элементе). | да | да | |
центр тяжести | ондрагентер | Срабатывает, когда что-то перетаскивается в область (на целевой элемент). | да | да | |
Перетащите над | ондраговер | Срабатывает, когда перетаскивание удерживается над областью (на целевом элементе). | да | да | |
драглев | Ondragleave | Срабатывает, когда что-то вытаскивается из области (на целевом элементе). | да | да | |
драгенд | ондрагенд | Срабатывает, когда заканчивается перетаскивание мышью (на движущемся элементе). | да | да | |
уронить | капля | Срабатывает, когда кнопка мыши отпускается над допустимой целью во время перетаскивания (на целевом элементе). | да | да | |
selectstart | onselectstart | Срабатывает, когда пользователь начинает выделять текст. | да | да | |
Клавиатура | помощь | на помощь | Срабатывает, когда пользователь инициирует помощь. | да | да |
HTML-фрейм / объект | перед выгрузкой | перед выгрузкой | Срабатывает перед выгрузкой документа. | Нет | да |
остановка | остановка | Срабатывает, когда пользователь прекращает загрузку объекта. (в отличие от прерывания, событие остановки может быть прикреплено к документу) | Нет | Нет | |
HTML-форма | до редактирования | onbeforeeditfocus | Срабатывает до того, как элемент получает фокус для редактирования. | да | да |
Шатер | Начните | на старте | Срабатывает, когда бегущая строка начинает новый цикл. | Нет | Нет |
Конец | на финише | Срабатывает, когда петля шатра завершена. | Нет | да | |
подпрыгивать | отскок | Срабатывает, когда бегущая строка с прокруткой отскакивает в обратном направлении. | Нет | да | |
Разное | до печати | onbeforeprint | Срабатывает перед печатью документа | Нет | Нет |
послепечатка | onafterprint | Срабатывает сразу после печати документа. | Нет | Нет | |
изменение собственности | onpropertychange | Срабатывает при изменении свойства объекта. | Нет | Нет | |
замена фильтра | onfilterchange | Срабатывает, когда фильтр изменяет свойства или завершает переход. | Нет | Нет | |
готово | onreadystatechange | Срабатывает при изменении свойства readyState элемента. | Нет | Нет | |
проиграть | onlosecapture | Срабатывает при вызове метода releaseCapture. | Нет | Нет |
Обратите внимание, что Mozilla, Safari и Opera также поддерживают событие readystatechange для XMLHttpRequest объект. Mozilla также поддерживает событие beforeunload, используя традиционный метод регистрации событий (уровень DOM 0). Mozilla и Safari также поддерживают контекстное меню, а Internet Explorer для Mac - нет.
Обратите внимание, что Firefox 6 и более поздние версии поддерживают события beforeprint и afterprint.
XUL события
Помимо общих (W3C) событий, Mozilla определила набор событий, которые работают только с XUL элементы.[нужна цитата ]
Категория | Тип | Атрибут | Описание | Пузыри | Отменяемый |
---|---|---|---|---|---|
Мышь | DOMMouseScroll | DOMMouseScroll | Срабатывает при перемещении колесика мыши, вызывая прокрутку содержимого. | да | да |
перетаскивания | ondragdrop | Срабатывает, когда пользователь отпускает кнопку мыши, чтобы бросить перетаскиваемый объект. | Нет | Нет | |
центр тяжести | ондрагентер | Срабатывает, когда указатель мыши впервые перемещается по элементу во время перетаскивания. Это похоже на событие наведения курсора мыши, но происходит при перетаскивании. | Нет | Нет | |
драже | ondragexit | Срабатывает, когда указатель мыши перемещается от элемента во время перетаскивания. Он также вызывается после падения на элемент. Это похоже на событие mouseout, но происходит во время перетаскивания. | Нет | Нет | |
тяга | упорство | Срабатывает, когда пользователь начинает перетаскивать элемент, обычно удерживая кнопку мыши и перемещая мышь. | Нет | Нет | |
Перетащите над | ондраговер | Связанное с событием mousemove, это событие запускается, когда что-то перетаскивается над элементом. | Нет | Нет | |
Вход | CheckboxStateChange | Срабатывает, когда флажок установлен или снят пользователем или скриптом. | Нет | Нет | |
RadioStateChange | Срабатывает при выборе переключателя пользователем или скриптом. | Нет | Нет | ||
Закрыть | onclose | Срабатывает, когда сделан запрос на закрытие окна. | Нет | да | |
команда | по команде | Аналогично событию W3C DOMActivate. Срабатывает, когда элемент активируется, например, щелчком мыши или нажатием клавиши. | Нет | Нет | |
Вход | на входе | Срабатывает, когда пользователь вводит текст в текстовое поле. | да | Нет | |
Пользовательский интерфейс | DOMMenuItemActive | DOMMenuItemActive | Срабатывает, когда меню или элемент меню завис над, или выделен. | да | Нет |
DOMMenuItemInactive | DOMMenuItemInactive | Срабатывает, когда меню или его элемент больше не наведен или выделен. | да | Нет | |
контекстное меню | oncontextmenu | Срабатывает, когда пользователь запрашивает открытие контекстного меню для элемента. Действие для этого зависит от платформы, но обычно это щелчок правой кнопкой мыши. | Нет | да | |
переполнение | переполнение | Запускает блок или другой элемент макета, когда недостаточно места для его отображения в полном размере. | Нет | Нет | |
переполнен | onoverflowchanged | Срабатывает при изменении состояния переполнения. | Нет | Нет | |
переполнение | на | Срабатывает элемент, когда становится достаточно места для его отображения в полный размер. | Нет | Нет | |
популярный | onpopuphidden | Запускается во всплывающее окно после того, как оно было скрыто. | Нет | Нет | |
популяция | попугаев | Запускает всплывающее окно, когда оно собирается быть скрытым. | Нет | Нет | |
всплывающее окно | onpopupshowing | Запускается во всплывающее окно непосредственно перед его открытием. | Нет | да | |
всплывающее окно | onpopupshown | Запускается во всплывающее окно после его открытия, так же как событие onload отправляется в окно при его открытии. | Нет | Нет | |
Команда | транслировать | в эфире | Ставится на наблюдателя. Широковещательное событие отправляется при изменении атрибутов прослушиваемого вещателя. | Нет | Нет |
commandupdate | oncommandupdate | Срабатывает при обновлении команды. | Нет | Нет |
Другие события
Для Mozilla и Opera 9 есть также недокументированные события, известные как DOMContentLoaded и DOMFrameContentLoaded которые срабатывают при загрузке содержимого DOM. Они отличаются от load, поскольку запускаются перед загрузкой связанных файлов (например, изображений). Однако DOMContentLoaded был добавлен в HTML 5 Технические характеристики.[12]Событие DOMContentLoaded также было реализовано в Webkit сборка движка рендеринга 500+.[13][14] Это относится ко всем версиям Гугл Хром и Сафари 3.1+. DOMContentLoaded также реализован в Internet Explorer 9.[15]
Opera 9 также поддерживает события Web Forms 2.0. DOMControlValueChanged, инвалид, форминпут и изменение формы.
Поток событий
Рассмотрим ситуацию, когда есть 2 элемента, вложенных вместе. У обоих есть обработчики событий, зарегистрированные для одного и того же типа события, скажем «щелчок». Когда пользователь нажимает на внутренний элемент, есть два возможных способа справиться с этим:
- Запускайте элементы от внешнего к внутреннему (захват события). Эта модель реализована в Netscape Navigator.
- Запускайте элементы от внутреннего к внешнему (всплытие событий ).Эта модель реализована в Internet Explorer и других браузерах.[16]
W3C занимает в этой борьбе среднюю позицию.[17]:§1.2 События сначала фиксируются, пока не достигнут целевой элемент, а затем всплывают. Во время потока событий на событие можно отреагировать в любом элементе пути (наблюдатель) в любой фазе, вызвав действие и / или остановив событие (с помощью метода event.stopPropagation () для браузеров, совместимых с W3C, и команд event.cancelBubble = true для Internet Explorer) и / или отменив действие по умолчанию для события.
Объект события
Объект Event предоставляет много информации о конкретном событии, включая информацию о целевом элементе, нажатой клавише, нажатой кнопке мыши, положении мыши и т. Д. К сожалению, в этой области существуют очень серьезные несовместимости браузеров. Следовательно, в этой статье обсуждается только объект W3C Event.
Имя | Тип | Описание |
---|---|---|
тип | DOMString | Имя события (без учета регистра на уровне DOM 2, но с учетом регистра на уровне DOM 3 [18]). |
цель | EventTarget | Используется для указания EventTarget, которому изначально было отправлено событие. |
currentTarget | EventTarget | Используется для указания EventTarget, чьи EventListeners в настоящее время обрабатываются. |
eventPhase | беззнаковый короткий | Используется, чтобы указать, какая фаза потока событий оценивается в данный момент. |
пузыри | логический | Используется, чтобы указать, является ли событие восходящим событием. |
отменяемый | логический | Используется, чтобы указать, можно ли предотвратить действие по умолчанию для события. |
отметка времени | DOMTimeStamp | Используется для указания времени (в миллисекундах относительно эпохи), в которое было создано событие. |
Имя | Тип аргумента | Имя аргумента | Описание |
---|---|---|---|
stopPropagation | Чтобы предотвратить дальнейшее распространение события во время потока событий. | ||
preventDefault | Отменить событие, если оно может быть отменено, что означает, что любое действие по умолчанию, обычно выполняемое реализацией в результате события, не произойдет. | ||
initEvent | DOMString | eventTypeArg | Задает тип события. |
логический | canBubbleArg | Указывает, может ли событие всплывать. | |
логический | cancelableArg | Указывает, можно ли предотвратить действие по умолчанию для события. |
Модели обработки событий
DOM уровня 0
Эта модель обработки событий была представлена Netscape Navigator, и остается самой кроссбраузерной моделью по состоянию на 2005 г.[Обновить].[нужна цитата ] Существует два типа моделей: встроенная модель и традиционная модель.
Встроенная модель
Во встроенной модели[19] обработчики событий добавляются как атрибуты элементов. В приведенном ниже примере диалоговое окно предупреждения с сообщением "Привет, Джо" появляется после гиперссылка нажата. Действие щелчка по умолчанию отменяется путем возврата false в обработчике событий.
<!doctype html><html язык="en"><голова> <мета кодировка=«УТФ-8»> <заглавие>Встроенная обработка событий</заглавие></голова><тело> <h1>Встроенная обработка событий</h1> <п>Привет <а href="http://www.example.com" по щелчку="triggerAlert ('Joe'); return false;">Джо</а>!</п> <сценарий> функция triggerAlert(имя) { окно.тревога("Привет " + имя); } </сценарий></тело></html>
Одно распространенное заблуждение[нужна цитата ] со встроенной моделью - это убеждение, что она позволяет регистрировать обработчики событий с настраиваемыми аргументами, например имя
в triggerAlert
функция. Хотя может показаться, что это так в приведенном выше примере, на самом деле происходит то, что Движок JavaScript браузера создает анонимная функция содержащие заявления в по щелчку
атрибут. В по щелчку
обработчик элемента будет привязан к следующей анонимной функции:
функция () { triggerAlert('Джо'); возвращаться ложный;}
Это ограничение модели событий JavaScript обычно преодолевается путем присвоения атрибутов функциональному объекту обработчика событий или использования закрытие.
Традиционная модель
В традиционной модели[20] обработчики событий могут быть добавлены или удалены скриптами. Как и во встроенной модели, для каждого события может быть зарегистрирован только один обработчик событий. Событие добавляется путем присвоения имени обработчика свойству события объекта элемента. Чтобы удалить обработчик событий, просто установите для свойства значение null:
<!doctype html><html язык="en"><голова> <мета кодировка=«УТФ-8»> <заглавие>Традиционная обработка событий</заглавие></голова><тело> <h1>Традиционная обработка событий</h1> <п>Эй Джо!</п> <сценарий> вар triggerAlert = функция () { окно.тревога("Эй Джо"); }; // Назначаем обработчик события документ.по щелчку = triggerAlert; // Назначаем другой обработчик событий окно.в процессе = triggerAlert; // Удаляем только что назначенный обработчик событий окно.в процессе = ноль; </сценарий></тело></html>
Чтобы добавить параметры:
вар имя = 'Джо';документ.по щелчку = (функция (имя) { возвращаться функция () { тревога('Привет ' + имя + '!'); };}(имя));
Внутренние функции сохраняют свои объем.
DOM уровня 2
W3C разработал более гибкую модель обработки событий в DOM Level 2.[17]
Имя | Описание | Тип аргумента | Имя аргумента |
---|---|---|---|
addEventListener | Разрешает регистрацию прослушивателей событий для цели события. | DOMString | тип |
EventListener | слушатель | ||
логический | useCapture | ||
removeEventListener | Позволяет удалить прослушиватели событий из цели события. | DOMString | тип |
EventListener | слушатель | ||
логический | useCapture | ||
dispatchEvent | Позволяет отправлять событие подписанным слушателям событий. | Мероприятие | evt |
Несколько полезных вещей, которые нужно знать:
- Чтобы предотвратить всплытие события, разработчики должны вызвать
stopPropagation ()
метод объекта события. - Чтобы предотвратить действие по умолчанию для вызываемого события, разработчики должны вызвать
preventDefault ()
метод объекта события.
Основное отличие от традиционной модели состоит в том, что для одного и того же события можно зарегистрировать несколько обработчиков событий. В useCapture
Параметр также можно использовать, чтобы указать, что обработчик должен вызываться на этапе захвата, а не на этапе восходящей цепочки. Эта модель поддерживается Mozilla, Опера, Сафари, Хром и Konqueror.
Переписанный пример, использованный в традиционной модели
<!doctype html><html язык="en"><голова> <мета кодировка=«УТФ-8»> <заглавие>DOM уровня 2</заглавие></голова><тело> <h1>DOM уровня 2</h1> <п>Эй Джо!</п> <сценарий> вар эй Джо = функция () { окно.тревога("Эй Джо!"); } // Добавляем обработчик события документ.addEventListener( "щелкнуть", эй Джо, истинный ); // фаза захвата // Добавляем еще один обработчик событий окно.addEventListener( "нагрузка", эй Джо, ложный ); // фаза пузырька // Удаляем только что добавленный обработчик событий окно.removeEventListener( "нагрузка", эй Джо, ложный ); </сценарий></тело></html>
Модель для Internet Explorer
Microsoft Internet Explorer до версии 8 не следует модели W3C, поскольку его собственная модель была создана до ратификации стандарта W3C. Internet Explorer 9 следует за событиями DOM уровня 3,[21] и Internet Explorer 11 удаляет поддержку модели, специфичной для Microsoft.[22]
Имя | Описание | Тип аргумента | Имя аргумента |
---|---|---|---|
attachEvent | Подобно методу addEventListener в W3C. | Нить | событие |
Указатель | fpNotify | ||
detachEvent | Похож на метод removeEventListener в W3C. | Нить | событие |
Указатель | fpNotify | ||
fireEvent | Подобно методу dispatchEvent W3C. | Нить | событие |
Мероприятие | oEventObject |
Несколько полезных вещей, которые нужно знать:
- Чтобы предотвратить всплытие событий, разработчики должны установить для события
cancelBubble
свойство. - Чтобы предотвратить действие по умолчанию для вызываемого события, разработчики должны установить для события
returnValue
свойство. - В
это
ключевое слово относится к глобальномуокно
объект.
Опять же, эта модель отличается от традиционной модели тем, что для одного и того же события можно зарегистрировать несколько обработчиков событий. Тем не менее useCapture
параметр не может использоваться для указания того, что обработчик должен вызываться на этапе захвата. Эта модель поддерживается Microsoft Internet Explorer и Браузеры на базе Trident (например. Maxthon, Браузер Avant ).
Переписанный пример, использованный в старой модели для Internet Explorer.
<!doctype html><html язык="en"><голова> <мета кодировка=«УТФ-8»> <заглавие>Модель для Internet Explorer</заглавие></голова><тело> <h1>Модель для Internet Explorer</h1> <п>Эй Джо!</п> <сценарий> вар эй Джо = функция () { окно.тревога("Эй Джо!"); } // Добавляем обработчик события документ.attachEvent("по щелчку", эй Джо); // Добавляем еще один обработчик событий окно.attachEvent("в процессе", эй Джо); // Удаляем только что добавленный обработчик событий окно.detachEvent("в процессе", эй Джо); </сценарий></тело></html>
Рекомендации
- Дейтель, Харви. (2002). Интернет и всемирная паутина: как программировать (Второе издание). ISBN 0-13-030897-8
- Организация Mozilla. (2009). Справочник по событиям DOM. Проверено 25 августа 2009 года.
- Quirksmode (2008). Таблицы совместимости событий. Проверено 27 ноября 2008 года.
- http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
внешняя ссылка
- Спецификация событий уровня 2 объектной модели документа (DOM)
- Документ объектной модели (DOM) Уровень 3 События Рабочий проект
- ДОМ4: События (черновик редакции)
- Рабочий проект событий пользовательского интерфейса
- Pointer Events Кандидат в рекомендации W3C
- MSDN PointerEvent
- Скрипка JS для всплывания и захвата событий
Рекомендации
- ^ "События JavaScript DOM". www.w3schools.com. Получено 2019-08-03.
- ^ «7.8 Перетаскивание - HTML5».
- ^ «HTML Drag and Drop API».
- ^ «Прогресс События».
- ^ «Файловый API».
- ^ https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event
- ^ «Спецификация событий уровня 3 объектной модели документа (DOM) (рабочий проект)». W3C. Получено 2013-04-17.
- ^ а б c "Touch Events версия 2 - проект редактора W3C". W3C. 14 ноября 2011 г.. Получено 10 декабря 2011.
- ^ «Apple снова использует патенты для подрыва открытых стандартов». opera.com. 9 декабря 2011 г.. Получено 9 декабря 2011.
- ^ «События указателя».
- ^ «IndieUI: События 1.0».
- ^ https://www.w3.org/TR/html5/
- ^ [1] В архиве 11 июня 2010 г. Wayback Machine
- ^ «Какие браузеры поддерживают собственное событие DOMContentLoaded?« Советы разработчикам Perfection Labs ». 29 июня 2011 года. Архивировано 29 июня 2011 года.CS1 maint: BOT: статус исходного URL-адреса неизвестен (связь)
- ^ "Тест-драйв перенаправления". Архивировано из оригинал на 2010-05-08. Получено 2010-05-06.
- ^ «Введение в события». Quirksmode.org. Получено 15 сентября 2012.
- ^ а б «Спецификация событий уровня 2 объектной модели документа (DOM)». W3C. 13 ноября 2000 г.. Получено 15 сентября 2012.
- ^ «Спецификация событий уровня 3 объектной модели документа (DOM) (рабочий проект)». W3C. Получено 2013-04-17.
- ^ «Обработчики ранних событий». Quirksmode.org. Получено 15 сентября 2012.
- ^ «Традиционная модель регистрации событий». Quirksmode.org. Получено 15 сентября 2012.
- ^ "Поддержка событий DOM уровня 3 в IE9". Microsoft. 26 марта 2010 г.. Получено 2010-03-28.
- ^ «Изменения совместимости в IE11 Preview». Microsoft. 9 сентября 2013 г.. Получено 2013-10-05.