События 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.

КатегорияТипАтрибутОписаниеПузыриОтменяемый
Мышьщелкнутьпо щелчкуПожары, когда указывающее устройство кнопка нажата над элементом. Щелчок определяется как нажатие и наведение курсора на одно и то же место на экране. Последовательность этих событий такова:
  • мышь
  • мышь
  • щелкнуть
дада
dblclickondblclickСрабатывает, когда кнопка указывающего устройства дважды щелкнул над элементомдада
мышьonmousedownСрабатывает при нажатии кнопки указывающего устройства над элементомдада
мышьonmouseupСрабатывает, когда кнопка указывающего устройства отпускается над элементомдада
наведение указателя мышипри наведении курсора наСрабатывает, когда указывающее устройство перемещается на элементдада
мышь[6]onmousemoveСрабатывает, когда указывающее устройство перемещается, когда оно находится над элементомдада
мышьonmouseoutСрабатывает, когда указывающее устройство перемещается от элементадада
перетащитьondragstartВыстреливается по элементу при запуске перетаскивания.дада
тащитьondragЭто событие запускается в источнике перетаскивания, то есть в элементе, из которого был запущен dragstart, во время операции перетаскивания.дада
центр тяжестиондрагентерСрабатывает, когда мышь впервые перемещается по элементу во время перетаскивания.дада
драглевOndragleaveЭто событие запускается, когда мышь покидает элемент во время перетаскивания.даНет
Перетащите надондраговерЭто событие запускается, когда мышь перемещается по элементу при перетаскивании.дада
уронитькапляСобытие перетаскивания запускается для элемента, в котором происходит перетаскивание в конце операции перетаскивания.дада
драгендондрагендИсточник перетаскивания получит событие dragend, когда операция перетаскивания будет завершена, независимо от того, была она успешной или нет.даНет
КлавиатураkeydownonkeydownСрабатывает перед нажатием клавиши при нажатии клавиши на клавиатуре.дада
нажатие клавиши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Срабатывает, когда указывающее устройство перемещается от элемента, или когда кнопка указывающего устройства, которое не поддерживает наведение, отпускается над его дочерними элементами.Нетда
gotpointercaptureongotpointercaptureСрабатывает, когда указатель захватывается методом 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. Авторам следует использовать это событие и интерфейс только с настраиваемыми представлениями прокрутки.дада
Запрос ValueChangevaluechangerequestИнициируется, когда пользовательский агент отправляет запрос на изменение значения в веб-приложение. Используется в настраиваемых элементах управления диапазоном, таких как слайдеры, карусели и т. Д.дада

События, специфичные для Internet Explorer

В дополнение к обычным (W3C) событиям, два основных типа событий добавляются Internet Explorer. Некоторые мероприятия реализованы как стандарты де-факто другими браузерами.

КатегорияТипАтрибутОписаниеПузыриОтменяемый
Буфер обменарезатьoncutСрабатывает после того, как выделенная область помещена в буфер обмена.дада
копироватькопияСрабатывает после того, как выделенная область скопирована в буфер обмена.дада
вставитьпастаСрабатывает после вставки выделения из буфера обмена.дада
перед обрезкойonbeforecutСрабатывает до того, как выделенная область будет вырезана в буфере обмена.дада
перед копиейперед копиейСрабатывает перед копированием выделения в буфер обмена.дада
перед пастойonbeforepasteСрабатывает перед вставкой выделения из буфера обмена.дада
Связывание данныхпоследующее обновлениеonafterupdateСрабатывает сразу после обновления объекта с привязкой к данным.даНет
перед обновлениемonbeforeupdateСрабатывает перед обновлением источника данных.дада
Cellchangeодин разСрабатывает при изменении источника данных.даНет
данные доступныondataavailableСрабатывает, когда становятся доступными новые данные из источника данных.даНет
набор данных измененondatasetchangedСрабатывает при изменении содержимого в источнике данных.даНет
набор данныхondatasetcompleteСрабатывает, когда передача данных из источника данных завершена.даНет
ошибка обновленияonerrorupdateСрабатывает, если при обновлении поля данных возникает ошибка.даНет
rowenteronrowenterСрабатывает, когда доступна новая строка данных из источника данных.даНет
rowexitonrowexitСрабатывает, когда строка данных из источника данных только что закончилась.Нетда
строки удалитьonrowdeleteСрабатывает при удалении строки данных из источника данных.даНет
вставленныйвставленныйСрабатывает, когда вставляется строка данных из источника данных.даНет
Мышьконтекстное менюoncontextmenuСрабатывает при отображении контекстного меню.дада
тащитьondragСрабатывает, когда во время перетаскивание мышью (на движущемся элементе).дада
драгстартondragstartСрабатывает, когда начинается перетаскивание мышью (на движущемся элементе).дада
центр тяжестиондрагентерСрабатывает, когда что-то перетаскивается в область (на целевой элемент).дада
Перетащите надондраговерСрабатывает, когда перетаскивание удерживается над областью (на целевом элементе).дада
драглевOndragleaveСрабатывает, когда что-то вытаскивается из области (на целевом элементе).дада
драгендондрагендСрабатывает, когда заканчивается перетаскивание мышью (на движущемся элементе).дада
уронитькапляСрабатывает, когда кнопка мыши отпускается над допустимой целью во время перетаскивания (на целевом элементе).дада
selectstartonselectstartСрабатывает, когда пользователь начинает выделять текст.дада
Клавиатурапомощьна помощьСрабатывает, когда пользователь инициирует помощь.дада
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 элементы.[нужна цитата ]

КатегорияТипАтрибутОписаниеПузыриОтменяемый
МышьDOMMouseScrollDOMMouseScrollСрабатывает при перемещении колесика мыши, вызывая прокрутку содержимого.дада
перетаскиванияondragdropСрабатывает, когда пользователь отпускает кнопку мыши, чтобы бросить перетаскиваемый объект.НетНет
центр тяжестиондрагентерСрабатывает, когда указатель мыши впервые перемещается по элементу во время перетаскивания. Это похоже на событие наведения курсора мыши, но происходит при перетаскивании.НетНет
дражеondragexitСрабатывает, когда указатель мыши перемещается от элемента во время перетаскивания. Он также вызывается после падения на элемент. Это похоже на событие mouseout, но происходит во время перетаскивания.НетНет
тягаупорствоСрабатывает, когда пользователь начинает перетаскивать элемент, обычно удерживая кнопку мыши и перемещая мышь.НетНет
Перетащите надондраговерСвязанное с событием mousemove, это событие запускается, когда что-то перетаскивается над элементом.НетНет
ВходCheckboxStateChangeСрабатывает, когда флажок установлен или снят пользователем или скриптом.НетНет
RadioStateChangeСрабатывает при выборе переключателя пользователем или скриптом.НетНет
ЗакрытьoncloseСрабатывает, когда сделан запрос на закрытие окна.Нетда
командапо командеАналогично событию W3C DOMActivate. Срабатывает, когда элемент активируется, например, щелчком мыши или нажатием клавиши.НетНет
Входна входеСрабатывает, когда пользователь вводит текст в текстовое поле.даНет
Пользовательский интерфейсDOMMenuItemActiveDOMMenuItemActiveСрабатывает, когда меню или элемент меню завис над, или выделен.даНет
DOMMenuItemInactiveDOMMenuItemInactiveСрабатывает, когда меню или его элемент больше не наведен или выделен.даНет
контекстное менюoncontextmenuСрабатывает, когда пользователь запрашивает открытие контекстного меню для элемента. Действие для этого зависит от платформы, но обычно это щелчок правой кнопкой мыши.Нетда
переполнениепереполнениеЗапускает блок или другой элемент макета, когда недостаточно места для его отображения в полном размере.НетНет
переполненonoverflowchangedСрабатывает при изменении состояния переполнения.НетНет
переполнениенаСрабатывает элемент, когда становится достаточно места для его отображения в полный размер.НетНет
популярныйonpopuphiddenЗапускается во всплывающее окно после того, как оно было скрыто.НетНет
популяцияпопугаевЗапускает всплывающее окно, когда оно собирается быть скрытым.НетНет
всплывающее окноonpopupshowingЗапускается во всплывающее окно непосредственно перед его открытием.Нетда
всплывающее окноonpopupshownЗапускается во всплывающее окно после его открытия, так же как событие onload отправляется в окно при его открытии.НетНет
Командатранслироватьв эфиреСтавится на наблюдателя. Широковещательное событие отправляется при изменении атрибутов прослушиваемого вещателя.НетНет
commandupdateoncommandupdateСрабатывает при обновлении команды.НетНет

Другие события

Для 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, которому изначально было отправлено событие.
currentTargetEventTargetИспользуется для указания EventTarget, чьи EventListeners в настоящее время обрабатываются.
eventPhaseбеззнаковый короткийИспользуется, чтобы указать, какая фаза потока событий оценивается в данный момент.
пузырилогическийИспользуется, чтобы указать, является ли событие восходящим событием.
отменяемыйлогическийИспользуется, чтобы указать, можно ли предотвратить действие по умолчанию для события.
отметка времениDOMTimeStampИспользуется для указания времени (в миллисекундах относительно эпохи), в которое было создано событие.
Методы событий
ИмяТип аргументаИмя аргументаОписание
stopPropagationЧтобы предотвратить дальнейшее распространение события во время потока событий.
preventDefaultОтменить событие, если оно может быть отменено, что означает, что любое действие по умолчанию, обычно выполняемое реализацией в результате события, не произойдет.
initEventDOMStringeventTypeArgЗадает тип события.
логический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/

внешняя ссылка

Рекомендации

  1. ^ "События JavaScript DOM". www.w3schools.com. Получено 2019-08-03.
  2. ^ «7.8 Перетаскивание - HTML5».
  3. ^ «HTML Drag and Drop API».
  4. ^ «Прогресс События».
  5. ^ «Файловый API».
  6. ^ https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event
  7. ^ «Спецификация событий уровня 3 объектной модели документа (DOM) (рабочий проект)». W3C. Получено 2013-04-17.
  8. ^ а б c "Touch Events версия 2 - проект редактора W3C". W3C. 14 ноября 2011 г.. Получено 10 декабря 2011.
  9. ^ «Apple снова использует патенты для подрыва открытых стандартов». opera.com. 9 декабря 2011 г.. Получено 9 декабря 2011.
  10. ^ «События указателя».
  11. ^ «IndieUI: События 1.0».
  12. ^ https://www.w3.org/TR/html5/
  13. ^ [1] В архиве 11 июня 2010 г. Wayback Machine
  14. ^ «Какие браузеры поддерживают собственное событие DOMContentLoaded?« Советы разработчикам Perfection Labs ». 29 июня 2011 года. Архивировано 29 июня 2011 года.CS1 maint: BOT: статус исходного URL-адреса неизвестен (связь)
  15. ^ "Тест-драйв перенаправления". Архивировано из оригинал на 2010-05-08. Получено 2010-05-06.
  16. ^ «Введение в события». Quirksmode.org. Получено 15 сентября 2012.
  17. ^ а б «Спецификация событий уровня 2 объектной модели документа (DOM)». W3C. 13 ноября 2000 г.. Получено 15 сентября 2012.
  18. ^ «Спецификация событий уровня 3 объектной модели документа (DOM) (рабочий проект)». W3C. Получено 2013-04-17.
  19. ^ «Обработчики ранних событий». Quirksmode.org. Получено 15 сентября 2012.
  20. ^ «Традиционная модель регистрации событий». Quirksmode.org. Получено 15 сентября 2012.
  21. ^ "Поддержка событий DOM уровня 3 в IE9". Microsoft. 26 марта 2010 г.. Получено 2010-03-28.
  22. ^ «Изменения совместимости в IE11 Preview». Microsoft. 9 сентября 2013 г.. Получено 2013-10-05.