DOM-событие
 | В этой статье есть несколько проблем. Пожалуйста, помогите улучшить его или обсудите эти проблемы на странице обсуждения . ( Узнайте, как и когда удалять эти шаблонные сообщения )
|
События DOM (объектная модель документа) — это сигнал о том, что что-то произошло или происходит, и могут быть вызваны взаимодействием пользователя или браузером. [1] на стороне клиента, Языки сценариев такие как JavaScript , JScript , VBScript и Java, могут регистрировать различные обработчики событий или прослушиватели на узлах элементов внутри дерева DOM , например, в HTML , XHTML , XUL и SVG документах .
Примеры событий DOM:
- Когда пользователь щелкает мышью
- Когда веб-страница загрузилась
- Когда изображение загружено
- Когда мышь перемещается по элементу
- Когда поле ввода изменено
- При отправке HTML-формы
- Когда пользователь нажимает клавишу [2]
Исторически сложилось так, что модели событий, используемые различными веб-браузерами, как и DOM, имели некоторые существенные различия, которые вызывали проблемы совместимости. Чтобы бороться с этим, модель событий была стандартизирована Консорциумом Всемирной паутины (W3C) на уровне DOM 2.
События
[ редактировать ]HTML-события
[ редактировать ]Общие события
[ редактировать ]Существует огромная коллекция событий, которые могут генерироваться большинством узлов элементов:
- События мыши . [3] [4]
- События клавиатуры .
- События HTML-фрейма/объекта.
- События HTML-формы.
- События пользовательского интерфейса.
- События мутации (уведомление о любых изменениях структуры документа).
- События прогресса [5] (используется XMLHttpRequest и File API [6] ).
Обратите внимание, что приведенная выше классификация событий не совсем совпадает с классификацией W3C.
| Категория | Тип | Атрибут | Описание | Пузыри | Отменяемый |
|---|---|---|---|---|---|
| Мышь | щелкнуть | по клику | Срабатывает при нажатии кнопки указывающего устройства над элементом. Щелчок определяется как перемещение курсора мыши вниз и вверх над одним и тем же местом экрана. Последовательность этих событий следующая:
|
Да | Да |
| dblclick | ondblclick | кнопки указывающего устройства Срабатывает при двойном щелчке по элементу. | Да | Да | |
| мышь вниз | onmousedown | Срабатывает, когда кнопка указывающего устройства нажимается на элемент | Да | Да | |
| наведение курсора мыши | onmouseup | Срабатывает, когда кнопка указывающего устройства отпускается над элементом | Да | Да | |
| наведение курсора мыши | при наведении курсора мыши | Срабатывает, когда указательное устройство перемещается на элемент | Да | Да | |
| перемещение мыши [7] | onmousemove | Срабатывает, когда указывающее устройство перемещается, когда оно находится над элементом. | Да | Да | |
| наведение курсора мыши | onmouseout | Срабатывает, когда указывающее устройство удаляется от элемента | Да | Да | |
| перетащить начало | вычесть начало | Срабатывает на элементе при начале перетаскивания. | Да | Да | |
| тащить | медведь | Это событие вызывается в источнике перетаскивания, то есть в элементе, где было запущено перетаскивание, во время операции перетаскивания. | Да | Да | |
| более терпимо | более невыносимый | Вызывается, когда мышь впервые наводится на элемент во время перетаскивания. | Да | Да | |
| драглиф | ондраглива | Это событие вызывается, когда мышь покидает элемент во время перетаскивания. | Да | Нет | |
| драговер | ондраговер | Это событие вызывается при наведении указателя мыши на элемент при перетаскивании. | Да | Да | |
| уронить | отменить | Событие перетаскивания вызывается для элемента, в котором происходит перетаскивание, в конце операции перетаскивания. | Да | Да | |
| несущий | невыносимый | Источник перетаскивания получит событие перетаскивания после завершения операции перетаскивания, независимо от того, была она успешной или нет. | Да | Нет | |
| Клавиатура | нажатие клавиши | нажатие клавиши | Срабатывает перед нажатием клавиши, когда нажата клавиша на клавиатуре. | Да | Да |
| нажатие клавиши | при нажатии клавиши | Срабатывает после нажатия клавиши, когда нажимается клавиша на клавиатуре. | Да | Да | |
| клавиатура | включение клавиатуры | Срабатывает при отпускании клавиши на клавиатуре | Да | Да | |
| HTML-фрейм /объект | нагрузка | загрузка | Срабатывает, когда пользовательский агент завершает загрузку всего содержимого документа, включая окна, фреймы, объекты и изображения.
Для элементов он срабатывает, когда целевой элемент и все его содержимое завершили загрузку. |
Нет | Нет |
| разгружать | при разгрузке | Срабатывает, когда пользовательский агент удаляет все содержимое из окна или фрейма.
Для элементов он срабатывает, когда целевой элемент или любое его содержимое было удалено. |
Нет | Нет | |
| прерывать | аборт | Срабатывает, когда загрузка объекта/изображения прекращается до полной загрузки | Да | Нет | |
| ошибка | по ошибке | Срабатывает, когда объект/изображение/кадр не могут быть загружены должным образом. | Да | Нет | |
| изменить размер | изменить размер | Срабатывает при изменении размера представления документа | Да | Нет | |
| прокрутка | прокрутка | Срабатывает при прокрутке элемента или представления документа. | Нет, за исключением того, что событие прокрутки документа должно появиться в окне. [8] | Нет | |
| HTML-форма | выбирать | onselect | Срабатывает, когда пользователь выбирает некоторый текст в текстовом поле , включая ввод и текстовую область. | Да | Нет |
| изменять | при смене | Срабатывает, когда элемент управления теряет фокус ввода и его значение было изменено с момента получения фокуса. | Да | Нет | |
| представлять на рассмотрение | при отправке | Срабатывает при отправке формы | Да | Да | |
| перезагрузить | при сбросе | Срабатывает при сбросе формы | Да | Нет | |
| фокус | в фокусе | Срабатывает, когда элемент получает фокус либо с помощью указывающего устройства, либо с помощью навигации по вкладкам. | Нет | Нет | |
| размытие | включить размытие | Срабатывает, когда элемент теряет фокус либо с помощью указывающего устройства, либо с помощью навигации по вкладкам. | Нет | Нет | |
| Пользовательский интерфейс | фокусин | (никто) | Аналогично событию фокуса HTML, но может быть применено к любому фокусируемому элементу. | Да | Нет |
| фокус | (никто) | Аналогично событию размытия HTML, но может быть применено к любому фокусируемому элементу. | Да | Нет | |
| DOMАктивировать | (никто) | Аналогично событию команды XUL. Срабатывает, когда элемент активируется, например, щелчком мыши или нажатием клавиши. | Да | Да | |
| Мутация | DOMsubtreeИзменено | (никто) | Срабатывает при изменении поддерева | Да | Нет |
| DOMNodeInserted | (никто) | Срабатывает, когда узел добавлен как дочерний по отношению к другому узлу. | Да | Нет | |
| DOMNodeRemoved | (никто) | Срабатывает, когда узел был удален из DOM-дерева. | Да | Нет | |
| DOMNodeRemovedFromDocument | (никто) | Срабатывает, когда узел удаляется из документа | Нет | Нет | |
| DOMNodeInsertedIntoDocument | (никто) | Срабатывает, когда узел вставляется в документ | Нет | Нет | |
| DOMAttrModified | (никто) | Срабатывает, когда атрибут был изменен | Да | Нет | |
| DOMCharacterDataModified | (никто) | Срабатывает, когда данные символа были изменены | Да | Нет | |
| Прогресс | запуск загрузки | (никто) | Прогресс начался. | Нет | Нет |
| прогресс | (никто) | В ходе выполнения. После отправки loadstart. | Нет | Нет | |
| ошибка | (никто) | Прогресс не удался. После отправки последнего прогресса или после отправки loadstart, если прогресс не был отправлен. | Нет | Нет | |
| прерывать | (никто) | Прогрессия прекращена. После отправки последнего прогресса или после отправки loadstart, если прогресс не был отправлен. | Нет | Нет | |
| нагрузка | (никто) | Прогрессия успешна. После отправки последнего прогресса или после отправки loadstart, если прогресс не был отправлен. | Нет | Нет | |
| конец загрузки | (никто) | Прогресс остановился. После отправки ошибки, прерывания или загрузки. | Нет | Нет |
Обратите внимание, что события, имена которых начинаются с «DOM», в настоящее время не поддерживаются должным образом, и по этой и другим причинам производительности они не рекомендуются W3C в DOM Level 3. Mozilla и Opera поддерживают DOMAttrModified , DOMNodeInserted , DOMNodeRemoved и DOMCharacterDataModified . Chrome и Safari поддерживают эти события, за исключением DOMAttrModified .
Сенсорные события
[ редактировать ]Веб-браузеры, работающие на сенсорных устройствах, таких как iOS от Google от Apple и Android , генерируют дополнительные события. [9] : §5.3
| Категория | Тип | Атрибут | Описание | Пузыри | Отменяемый |
|---|---|---|---|---|---|
| Трогать | сенсорный старт | Срабатывает, когда палец прикасается к сенсорной поверхности/экрану. | Да | Да | |
| касание | Срабатывает, когда палец убирается с сенсорной поверхности/экрана. | Да | Да | ||
| сенсорное перемещение | Срабатывает, когда палец, уже помещенный на экран, перемещается по экрану. | Да | Да | ||
| сенсорный ввод | Срабатывает, когда точка касания перемещается в интерактивную область, определенную элементом DOM. | Да | Да | ||
| сенсорный отпуск | Срабатывает, когда точка касания выходит за пределы интерактивной области, определенной элементом DOM. | Да | Да | ||
| сенсорная отмена | Пользовательский агент должен отправить этот тип события, чтобы указать, когда TouchPoint был нарушен способом, зависящим от реализации, например, при выходе за пределы окна UA. Пользовательский агент также может отправлять события этого типа, когда пользователь размещает на сенсорной поверхности больше точек касания (точка координат, в которой указатель (например, палец или стилус) пересекает целевую поверхность интерфейса), чем настроено устройство или реализация. store, и в этом случае самый ранний объект TouchPoint в TouchList должен быть удален. [9] : §5.9 | Да | Нет |
В W3C проекте рекомендации TouchEvent представляет TouchList из Touch локации, клавиши-модификаторы , активные TouchList из Touch местоположения внутри целевого элемента DOM и TouchList из Touch локации, которые изменились со времени предыдущего TouchEvent. [9]
Apple не присоединилась к этой рабочей группе и отложила рекомендацию W3C по своей спецификации Touch Events, раскрыв патенты на позднем этапе процесса рекомендаций. [10]
События указателя
[ редактировать ]Веб-браузеры на устройствах с различными типами устройств ввода, включая мышь, сенсорную панель и перо, могут генерировать интегрированные события ввода. Пользователи могут видеть, какой тип устройства ввода нажат, какая кнопка нажата на этом устройстве и насколько сильно нажимается кнопка, когда речь идет о стилусе. По состоянию на октябрь 2013 года это событие поддерживается только Internet Explorer 10 и 11. [11]
| Категория | Тип | Атрибут | Описание | Пузыри | Отменяемый |
|---|---|---|---|---|---|
| Указатель | указатель вниз | onpointerdown | Срабатывает, когда кнопка указывающего устройства активируется или нажимается на элемент. | Да | Да |
| указатель вверх | onpointerup | Срабатывает, когда кнопка указывающего устройства отпускается над элементом | Да | Да | |
| указательотмена | onpointercancel | Срабатывает, когда указывающее устройство вряд ли продолжит генерировать событие, поскольку, например, устройство используется для панорамирования или масштабирования после события перемещения указателя вниз. | Да | Да | |
| указательперемещение | onpointermove | Срабатывает, когда указывающее устройство перемещается, когда оно находится над элементом. | Да | Да | |
| наведение указателя | onpointerover | Срабатывает, когда указательное устройство перемещается на элемент | Да | Да | |
| указатель | onpointerout | Срабатывает, когда указательное устройство удаляется от элемента. Также срабатывает после наведения указателя без наведения указателя или после | Да | Да | |
| точечный интерес | onpointerenter | Срабатывает, когда указательное устройство перемещается на элемент или когда кнопка указательного устройства, не поддерживающая наведение, нажимается на одном из его дочерних элементов. | Нет | Да | |
| указательоставить | onpointerleave | Срабатывает, когда указательное устройство удаляется от элемента или когда кнопка указательного устройства, не поддерживающая наведение, отпускается над его дочерними элементами. | Нет | Да | |
| GotPointerCapture | онготпойнтерзахват | Срабатывает, когда указатель захватывается методом setPointerCapture. | Да | Нет | |
| потерянный указательзахват | onlostpointercapture | Срабатывает, когда указатель освобождается методом ReleasePointerCapture. | Да | Нет |
Инди-события пользовательского интерфейса
[ редактировать ]Еще не реализованные рабочие группы Indie UI хотят помочь разработчикам веб-приложений поддерживать стандартные события взаимодействия с пользователем без необходимости обрабатывать различные технические события, специфичные для платформы, которые могут с ними совпадать. [12]
Написание сценариев для полезных интерфейсов может оказаться затруднительным, особенно если учесть, что шаблоны проектирования пользовательского интерфейса различаются в зависимости от программных платформ, аппаратного обеспечения и языковых стандартов и что эти взаимодействия могут быть дополнительно настроены на основе личных предпочтений. Люди привыкли к тому, как интерфейс работает в их собственной системе, и их предпочтительный интерфейс часто отличается от предпочтительного интерфейса автора веб-приложения.
Например, авторы веб-приложений, желающие перехватить намерение пользователя отменить последнее действие, должны «прослушивать» все следующие события:
- Control+Z в Windows и Linux.
- Command+Z в Mac OS X.
- Shake Events на некоторых мобильных устройствах.
Было бы проще прослушать один нормализованный запрос на «отмену» предыдущего действия.
| Категория | Тип | Описание | Пузыри | Отменяемый |
|---|---|---|---|---|
| Запрос | отменить запрос | Указывает, что пользователь желает «отменить» предыдущее действие. (Может быть заменен интерфейсом UndoManager.) | Да | Да |
| повторный запрос | Указывает, что пользователь желает «повторить» ранее «отмененное» действие. (Может быть заменен интерфейсом UndoManager.) | Да | Нет | |
| запрос на расширение | Указывает, что пользователь желает раскрыть информацию в свернутом разделе (например, виджет раскрытия) или узле ветвления в иерархии (например, в виде дерева ). | Да | Да | |
| свернуть запрос | Указывает, что пользователь желает скрыть или свернуть информацию в расширенном разделе (например, виджет раскрытия) или узле ветвления в иерархии (например, в виде дерева). | Да | Да | |
| отклонить запрос | Указывает, что пользователь желает «закрыть» текущий вид (например, отменить диалог или закрыть всплывающее меню). | Да | Да | |
| удалить запрос | Указывает, что пользователь хочет инициировать действие «удаление» для отмеченного элемента или текущего представления. | Да | Да | |
| Запрос фокуса | запрос направленного фокуса | Инициируется, когда пользовательский агент отправляет веб-приложению запрос «фокуса направления». Веб-авторы не должны использовать или регистрировать события directfocusrequest, если достаточно стандартных событий фокусировки и размытия браузера. Использование этих событий без необходимости может привести к снижению производительности или негативному пользовательскому опыту. | Да | Да |
| линейный фокусзапрос | Инициируется, когда пользовательский агент отправляет веб-приложению запрос «линейной фокусировки». Веб-авторам не следует использовать или регистрировать события LinearfocusRequest, если достаточно стандартных событий фокусировки и размытия браузера. Этот тип события необходим только для специализированных типов элементов управления, таких как сетки данных, где следующий логический элемент может быть недоступен для фокуса или даже в DOM, пока он не будет запрошен. Использование этих событий без необходимости может привести к снижению производительности или негативному пользовательскому опыту. | Да | Да | |
| палитрафокусзапрос | Инициируется, когда пользовательский агент отправляет веб-приложению запрос «фокуса палитры». Авторы веб-приложений, получающие это событие, должны переместить фокус на первую палитру в веб-приложении или циклически переключаться между всеми доступными палитрами. Примечание. палитры иногда называют немодальными диалоговыми окнами или окнами инспектора. | Да | Да | |
| панель инструментовfocusrequest | Инициируется, когда пользовательский агент отправляет веб-приложению запрос «фокуса панели инструментов». Авторы веб-приложений, получающие это событие, должны переместить фокус на главную панель инструментов веб-приложения или переключаться между всеми доступными панелями инструментов. | Да | Да | |
| Запрос на манипуляцию | запрос на перемещение | Инициируется, когда пользовательский агент отправляет веб-приложению запрос на перемещение с соответствующими значениями дельты x/y. Это используется, например, при перемещении объекта в новое место на холсте макета. | Да | Да |
| панзапрос | Инициируется, когда пользовательский агент отправляет веб-приложению запрос панорамирования с соответствующими значениями дельты x/y. Это используется, например, при изменении центральной точки при панорамировании карты или другого пользовательского средства просмотра изображений. | Да | Да | |
| запрос на вращение | Инициируется, когда пользовательский агент отправляет веб-приложению запрос на поворот с соответствующими значениями координат x/y и значением поворота в градусах. | Да | Да | |
| запрос на масштабирование | Инициируется, когда пользовательский агент отправляет веб-приложению запрос масштабирования с соответствующими исходными значениями x/y и коэффициентом масштабирования. | Да | Да | |
| Запрос прокрутки | запрос прокрутки | Инициируется, когда пользовательский агент отправляет веб-приложению запрос на прокрутку с сопутствующими значениями дельты x/y или одним из других определенных значений ScrollType. Авторам следует использовать это событие и действие только с настраиваемыми представлениями прокрутки. | Да | Да |
| Запрос на изменение значения | запрос на изменение значения | Инициируется, когда пользовательский агент отправляет запрос на изменение значения в веб-приложение. Используется в пользовательских элементах управления диапазоном, таких как ползунки, карусели и т. д. | Да | Да |
События, специфичные для Internet Explorer
[ редактировать ]добавляет два основных типа событий В дополнение к общим (W3C) событиям Internet Explorer . Некоторые события были реализованы как стандарты де-факто в других браузерах .
- События буфера обмена .
- События привязки данных. [ нужны разъяснения ]
| Категория | Тип | Атрибут | Описание | Пузыри | Отменяемый |
|---|---|---|---|---|---|
| Буфер обмена | резать | неразрезанный | Срабатывает после вырезания выделенного фрагмента в буфер обмена. | Да | Да |
| копировать | копия | Срабатывает после копирования выделения в буфер обмена. | Да | Да | |
| вставить | вставить | Срабатывает после вставки выделенного фрагмента из буфера обмена. | Да | Да | |
| предварительная обрезка | onbeforecut | Срабатывает перед тем, как выделенный фрагмент будет вырезан в буфер обмена. | Да | Да | |
| перед копированием | onbeforecopy | Срабатывает перед копированием выделения в буфер обмена. | Да | Да | |
| перед вставкой | onbeforepaste | Срабатывает перед вставкой выделения из буфера обмена. | Да | Да | |
| Привязка данных | послеобновления | onafterupdate | Срабатывает сразу после обновления объекта с привязкой к данным. | Да | Нет |
| перед обновлением | onbeforeupdate | Срабатывает перед обновлением источника данных. | Да | Да | |
| смена ячейки | oncellchange | Срабатывает, когда источник данных изменился. | Да | Нет | |
| данные доступны | волна доступна | Срабатывает, когда становятся доступными новые данные из источника данных. | Да | Нет | |
| набор данных изменен | ondatasetchanged | Срабатывает, когда содержимое источника данных изменилось. | Да | Нет | |
| набор данныхполный | набор волнполный | Срабатывает, когда передача данных из источника данных завершена. | Да | Нет | |
| ошибка обновления | onerrorupdate | Срабатывает, если при обновлении поля данных возникает ошибка. | Да | Нет | |
| гребец | гребцы | Срабатывает, когда доступна новая строка данных из источника данных. | Да | Нет | |
| выход из ряда | onrowexit | Срабатывает, когда строка данных из источника данных только что завершилась. | Нет | Да | |
| удаление строк | onrowsdelete | Срабатывает при удалении строки данных из источника данных. | Да | Нет | |
| строка вставлена | onrowinserted | Срабатывает при вставке строки данных из источника данных. | Да | Нет | |
| Мышь | контекстное меню | неконтекстное меню | Срабатывает, когда отображается контекстное меню. | Да | Да |
| тащить | медведь | Срабатывает при перетаскивании мышью (на движущемся элементе). | Да | Да | |
| перетащить начало | вычесть начало | Срабатывает, когда начинается перетаскивание мышью (на движущемся элементе). | Да | Да | |
| более терпимо | более невыносимый | Срабатывает, когда что-то перетаскивается в область (на целевой элемент). | Да | Да | |
| драговер | ондраговер | Срабатывает, когда удерживается перетаскивание над областью (на целевом элементе). | Да | Да | |
| драглиф | ондраглива | Срабатывает, когда что-то вытаскивается из области (на целевом элементе). | Да | Да | |
| несущий | невыносимый | Срабатывает, когда перетаскивание мышью заканчивается (на движущемся элементе). | Да | Да | |
| уронить | отменить | Срабатывает, когда кнопка мыши отпускается над допустимой целью во время перетаскивания (на целевом элементе). | Да | Да | |
| выбрать начало | onselectstart | Срабатывает, когда пользователь начинает выделять текст. | Да | Да | |
| Клавиатура | помощь | бесполезный | Срабатывает, когда пользователь инициирует помощь. | Да | Да |
| HTML-фрейм/объект | перед разгрузкой | onbeforeunload | Срабатывает перед выгрузкой документа. | Нет | Да |
| останавливаться | неудержимый | Срабатывает, когда пользователь прекращает загрузку объекта. (в отличие от прерывания, событие остановки можно прикрепить к документу) | Нет | Нет | |
| HTML-форма | перед редактированием фокуса | onbeforeeditfocus | Срабатывает до того, как элемент получит фокус для редактирования. | Да | Да |
| Шатер | начинать | начало | Срабатывает, когда область выделения начинает новый цикл. | Нет | Нет |
| заканчивать | закончить | Срабатывает, когда цикл выделения завершен. | Нет | Да | |
| подпрыгивать | отскок | Срабатывает, когда область прокрутки отскакивает в другом направлении. | Нет | Да | |
| Разнообразный | передпечать | onbeforeprint | Срабатывает перед печатью документа | Нет | Нет |
| послепечаток | послепечать | Срабатывает сразу после печати документа. | Нет | Нет | |
| изменение свойства | onpropertychange | Срабатывает при изменении свойства объекта. | Нет | Нет | |
| замена фильтра | onfilterchange | Срабатывает, когда фильтр меняет свойства или завершает переход. | Нет | Нет | |
| готовое состояниеизменение | onreadystatechange | Срабатывает при изменении свойства ReadyState элемента. | Нет | Нет | |
| потерять захват | onlosecapture | Срабатывает при вызове метода ReleaseCapture. | Нет | Нет |
Обратите внимание, что Mozilla, Safari и Opera также поддерживают событие Readystatechange для объекта XMLHttpRequest . Mozilla также поддерживает событие beforeunload, используя традиционный метод регистрации событий (DOM Level 0). Mozilla и Safari также поддерживают контекстное меню, но Internet Explorer для Mac — нет.
Обратите внимание, что Firefox 6 и более поздние версии поддерживают события beforeprint и afterprint.
XUL-события
[ редактировать ]В дополнение к общим событиям (W3C) Mozilla определила набор событий, которые работают только с элементами XUL . [ нужна ссылка ]
| Категория | Тип | Атрибут | Описание | Пузыри | Отменяемый |
|---|---|---|---|---|---|
| Мышь | DOMМышьПрокрутка | DOMМышьПрокрутка | Срабатывает при перемещении колеса мыши, вызывая прокрутку содержимого. | Да | Да |
| перетаскивание | ондрагдроп | Срабатывает, когда пользователь отпускает кнопку мыши, чтобы отбросить перетаскиваемый объект . | Нет | Нет | |
| более терпимо | более невыносимый | Срабатывает, когда указатель мыши впервые перемещается над элементом во время перетаскивания. Это похоже на событие наведения курсора мыши, но происходит при перетаскивании. | Нет | Нет | |
| он потащил | выход из ходовой части | Срабатывает, когда указатель мыши удаляется от элемента во время перетаскивания. Он также вызывается после падения на элемент. Оно похоже на событие mouseout, но происходит во время перетаскивания. | Нет | Нет | |
| перетаскивание | перетаскивание | Срабатывает, когда пользователь начинает перетаскивать элемент, обычно удерживая кнопку мыши и перемещая ее. | Нет | Нет | |
| драговер | ондраговер | Это событие связано с событием mousemove и возникает, когда что-то перетаскивается на элемент. | Нет | Нет | |
| Вход | ФлажокStateChange | Срабатывает, когда флажок установлен или снят пользователем или сценарием. | Нет | Нет | |
| RadioStateChange | Срабатывает, когда переключатель выбран пользователем или сценарием. | Нет | Нет | ||
| закрывать | закрыть | Срабатывает, когда был сделан запрос на закрытие окна. | Нет | Да | |
| команда | по команде | Аналогично событию W3C DOMActivate. Срабатывает, когда элемент активируется, например, щелчком мыши или нажатием клавиши. | Нет | Нет | |
| вход | oninput | Срабатывает, когда пользователь вводит текст в текстовое поле. | Да | Нет | |
| Пользовательский интерфейс | DOMMenuItemActive | DOMMenuItemActive | Срабатывает, когда меню или пункт меню наводятся или выделяются. | Да | Нет |
| DOMMenuItemInactive | DOMMenuItemInactive | Срабатывает, когда меню или пункт меню больше не наводится или не выделяется. | Да | Нет | |
| контекстное меню | неконтекстное меню | Срабатывает, когда пользователь запрашивает открытие контекстного меню для элемента. Действия для этого различаются в зависимости от платформы, но обычно это щелчок правой кнопкой мыши. | Нет | Да | |
| переполнение | onoverflow | Запускает блок или другой элемент макета, когда недостаточно места для его отображения в полном размере. | Нет | Нет | |
| переполнение изменено | onoverflowchanged | Срабатывает при изменении состояния переполнения. | Нет | Нет | |
| перелив | перелив | Срабатывает на элементе, когда становится достаточно места для его отображения в полном размере. | Нет | Нет | |
| всплывающий скрытый | непопулярный | Вызывает всплывающее окно после того, как оно было скрыто. | Нет | Нет | |
| попуфейдинг | onpopuphiding | Вызывается всплывающее окно, когда оно собирается скрыться. | Нет | Нет | |
| всплывающее окно | onpopupshowing | Вызывается во всплывающем окне непосредственно перед его открытием. | Нет | Да | |
| всплывающее окно | onpopupshown | Срабатывает во всплывающем окне после его открытия, подобно событию onload, которое отправляется в окно при его открытии. | Нет | Нет | |
| Команда | транслировать | в эфире | Ставится на наблюдателя. Событие трансляции отправляется при изменении атрибутов прослушиваемой вещательной компании. | Нет | Нет |
| командаобновление | oncommandupdate | Срабатывает при обновлении команды. | Нет | Нет |
Другие события
[ редактировать ]Для Mozilla и Opera 9 также существуют недокументированные события, известные как DOMContentLoaded и DOMFrameContentLoaded , которые срабатывают при загрузке содержимого DOM. Они отличаются от «загрузки», поскольку срабатывают перед загрузкой связанных файлов (например, изображений). Однако DOMContentLoaded был добавлен в спецификацию HTML 5 . [13] Событие DOMContentLoaded также было реализовано в сборке движка рендеринга Webkit 500+. [14] [15] Это относится ко всем версиям Google Chrome и Safari 3.1+. DOMContentLoaded также реализован в Internet Explorer 9 . [16]
Opera 9 также поддерживает события Web Forms 2.0 DOMControlValueChanged , инвалид , forminput и formchange .
Поток событий
[ редактировать ]Рассмотрим ситуацию, когда в дереве участвуют две цели событий . Оба имеют прослушиватели событий, зарегистрированные для одного и того же типа событий, например «щелчок». Когда пользователь нажимает на внутренний элемент, есть два возможных способа его обработки:
- Запуск элементов от внешнего к внутреннему (перехват событий). Эта модель реализована в Netscape Navigator .
- Запуск элементов от внутреннего к внешнему ( всплывание событий ). Эта модель реализована в Internet Explorer и других браузерах. [17]
W3C занимает в этой борьбе среднюю позицию. [18] : §1.2
Согласно W3C, события проходят три фазы, когда цель события участвует в дереве:
- Фаза захвата: событие перемещается вниз от корневой цели события к цели события.
- Целевая фаза: событие проходит через цель события.
- Фаза пузырька ( необязательно ): событие возвращается от цели события к корневой цели события. Фаза «пузыря» наступит только для событий, которые «пузырятся» (где
event.bubbles == true)
Визуализацию этого потока событий можно найти на https://domevents.dev.
Остановка событий
[ редактировать ]Пока событие проходит через прослушиватели событий, его можно остановить с помощью event.stopPropagation() или event.stopImmediatePropagation()
event.stopPropagation(): событие останавливается после завершения всех прослушивателей событий, прикрепленных к текущей цели события на текущей фазе события.event.stopImmediatePropagation(): событие немедленно останавливается, и дальнейшие прослушиватели событий не выполняются.
Когда событие остановлено, оно больше не будет перемещаться по пути события. Остановка события не отменяет событие.
Устаревшие механизмы для остановки события
[ редактировать ]- Установите
event.cancelBubbleкtrue(Интернет Эксплорер) - Установите
event.returnValueсобственностьfalse
Отмена мероприятий
[ редактировать ]А cancelable мероприятие можно отменить позвонив event.preventDefault(). Отмена события приведет к отказу от поведения браузера по умолчанию для этого события. При отмене мероприятия event.defaultPrevented свойство будет установлено на true. Отмена события не остановит его перемещение по пути события.
Объект события
[ редактировать ]Объект Event предоставляет много информации о конкретном событии, включая информацию о целевом элементе, нажатой клавише, нажатой кнопке мыши, положении мыши и т. д. К сожалению, в этой области существуют очень серьезные несовместимости браузеров. Следовательно, в этой статье обсуждается только объект W3C Event.
| Имя | Тип | Описание |
|---|---|---|
| тип | DOMString | Имя события (без учета регистра на уровне DOM 2, но с учетом регистра на уровне DOM 3). [19] ). |
| цель | EventTarget | Используется для указания EventTarget, которому изначально было отправлено событие. |
| текущая цель | EventTarget | Используется для указания EventTarget, EventListeners которого в данный момент обрабатываются. |
| eventPhase | беззнаковый короткий | Используется для указания того, какая фаза потока событий оценивается в данный момент. |
| пузыри | логическое значение | Используется для указания того, является ли событие всплывающим событием. |
| отменяемый | логическое значение | Используется для указания того, можно ли предотвратить действие по умолчанию для события. |
| метка времени | DOMTimeStamp | Используется для указания времени (в миллисекундах относительно эпохи), в которое было создано событие. |
| Имя | Тип аргумента | Имя аргумента | Описание |
|---|---|---|---|
| стопРаспространение | Чтобы предотвратить дальнейшее распространение события во время потока событий. | ||
| предотвратить по умолчанию | Отменить событие, если оно может быть отменено, что означает, что любое действие по умолчанию, обычно выполняемое реализацией в результате события, не произойдет. | ||
| initEvent | DOMString | eventTypeArg | Указывает тип события. |
| логическое значение | canBubbleArg | Указывает, может ли событие всплывать. | |
| логическое значение | отменяемыйArg | Указывает, можно ли предотвратить действие события по умолчанию. |
Модели обработки событий
[ редактировать ]DOM-уровень 0
[ редактировать ]Эта модель обработки событий была представлена Netscape Navigator и по состоянию на 2005 год остается самой кроссбраузерной моделью. [update]. [ нужна ссылка ] Существует два типа моделей: встроенная модель и традиционная модель.
Встроенная модель
[ редактировать ]Во встроенной модели [20] обработчики событий добавляются как атрибуты элементов. В приведенном ниже примере появляется диалоговое окно предупреждения с сообщением «Эй, Джо» после щелчка по гиперссылке . Действие щелчка по умолчанию отменяется путем возврата false в обработчике событий.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inline Event Handling</title>
</head>
<body>
<h1>Inline Event Handling</h1>
<p>Hey <a href="http://www.example.com" onclick="triggerAlert('Joe'); return false;">Joe</a>!</p>
<script>
function triggerAlert(name) {
window.alert("Hey " + name);
}
</script>
</body>
</html>
Одно распространенное заблуждение [ нужна ссылка ] со встроенной моделью является уверенность в том, что она позволяет регистрировать обработчики событий с настраиваемыми аргументами, например name в triggerAlert функция. Хотя может показаться, что в приведенном выше примере это именно так, на самом деле происходит то, что движок JavaScript браузера создает анонимную функцию, содержащую операторы в onclick атрибут. onclick обработчик элемента будет привязан к следующей анонимной функции:
function () {
triggerAlert('Joe');
return false;
}
Это ограничение модели событий JavaScript обычно преодолевается путем назначения атрибутов функциональному объекту обработчика событий или использования замыканий .
Традиционная модель
[ редактировать ]В традиционной модели [21] обработчики событий могут быть добавлены или удалены с помощью сценариев. Как и во встроенной модели, для каждого события может быть зарегистрирован только один обработчик событий. Событие добавляется путем присвоения имени обработчика свойству события объекта элемента. Чтобы удалить обработчик событий, просто установите для свойства значение null:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Traditional Event Handling</title>
</head>
<body>
<h1>Traditional Event Handling</h1>
<p>Hey Joe!</p>
<script>
var triggerAlert = function () {
window.alert("Hey Joe");
};
// Assign an event handler
document.onclick = triggerAlert;
// Assign another event handler
window.onload = triggerAlert;
// Remove the event handler that was just assigned
window.onload = null;
</script>
</body>
</html>
Чтобы добавить параметры:
var name = 'Joe';
document.onclick = (function (name) {
return function () {
alert('Hey ' + name + '!');
};
}(name));
Внутренние функции сохраняют свою область видимости .
ДОМ Уровень 2
[ редактировать ]W3C разработал более гибкую модель обработки событий на уровне DOM 2. [18]
| Имя | Описание | Тип аргумента | Имя аргумента |
|---|---|---|---|
| добавитьEventListener | Позволяет регистрировать прослушиватели событий в целевом событии. | DOMString | тип |
| Слушатель событий | слушатель | ||
| логическое значение | использоватьCapture | ||
| удалить прослушиватель событий | Позволяет удалять прослушиватели событий из цели события. | DOMString | тип |
| Слушатель событий | слушатель | ||
| логическое значение | использоватьCapture | ||
| диспетчерское событие | Позволяет отправлять событие подписанным прослушивателям событий. | Событие | возможно |
Несколько полезных вещей, которые следует знать:
- Чтобы предотвратить всплытие события, разработчики должны вызвать метод
stopPropagation()метод объекта события. - Чтобы предотвратить действие по умолчанию для вызываемого события, разработчики должны вызвать метод
preventDefault()метод объекта события.
Основное отличие от традиционной модели заключается в том, что для одного и того же события можно зарегистрировать несколько обработчиков событий. useCapture Опцию также можно использовать, чтобы указать, что обработчик должен вызываться на этапе захвата, а не на этапе всплытия. Эту модель поддерживают Mozilla , Opera , Safari , Chrome и Konqueror .
Переработка примера, используемого в традиционной модели.
[ редактировать ]<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOM Level 2</title>
</head>
<body>
<h1>DOM Level 2</h1>
<p>Hey Joe!</p>
<script>
var heyJoe = function () {
window.alert("Hey Joe!");
}
// Add an event handler
document.addEventListener( "click", heyJoe, true ); // capture phase
// Add another event handler
window.addEventListener( "load", heyJoe, false ); // bubbling phase
// Remove the event handler just added
window.removeEventListener( "load", heyJoe, false );
</script>
</body>
</html>
Модель для Internet Explorer
[ редактировать ]Microsoft Internet Explorer до версии 8 не соответствует модели W3C, поскольку его собственная модель была создана до ратификации стандарта W3C. Internet Explorer 9 следует за событиями DOM уровня 3, [22] и Internet Explorer 11 удаляет поддержку модели, специфичной для Microsoft. [23]
| Имя | Описание | Тип аргумента | Имя аргумента |
|---|---|---|---|
| AttachEvent | Аналогично методу addEventListener W3C. | Нить | sEvent |
| Указатель | fpNotify | ||
| отсоединитьСобытие | Аналогично методу RemoveEventListener W3C. | Нить | sEvent |
| Указатель | fpNotify | ||
| FireEvent | Аналогично методу диспетчеризации W3C. | Нить | sEvent |
| Событие | oEventObject |
Несколько полезных вещей, которые следует знать:
- Чтобы предотвратить всплывание событий, разработчики должны установить
cancelBubbleсвойство. - Чтобы предотвратить вызов события по умолчанию, разработчики должны установить
returnValueсвойство. - The
thisКлючевое слово относится к глобальномуwindowобъект.
Опять же, эта модель отличается от традиционной модели тем, что для одного и того же события можно зарегистрировать несколько обработчиков событий. Однако useCapture Опцию нельзя использовать, чтобы указать, что обработчик должен вызываться на этапе захвата. Эта модель поддерживается браузерами на базе Microsoft Internet Explorer и Trident (например, Maxthon , Avant Browser).
Переписанный пример, использованный в старой модели, специфичной для Internet Explorer.
[ редактировать ]<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Internet Explorer-specific model</title>
</head>
<body>
<h1>Internet Explorer-specific model</h1>
<p>Hey Joe!</p>
<script>
var heyJoe = function () {
window.alert("Hey Joe!");
}
// Add an event handler
document.attachEvent("onclick", heyJoe);
// Add another event handler
window.attachEvent("onload", heyJoe);
// Remove the event handler just added
window.detachEvent("onload", heyJoe);
</script>
</body>
</html>
Ссылки
[ редактировать ]- ^ «ДОМ Стандарт» . dom.spec.whatwg.org . Проверено 25 мая 2021 г.
- ^ «События JavaScript DOM» . www.w3schools.com . Проверено 3 августа 2019 г.
- ^ «7.8 Перетаскивание — HTML5» .
- ^ «HTML API перетаскивания» . 28 марта 2024 г.
- ^ «События прогресса» .
- ^ «Файловый API» .
- ^ «Элемент: событие Mousemove — веб-API | MDN» . 22 декабря 2023 г.
- ^ «Спецификация событий объектной модели документа (DOM) уровня 3 (рабочий проект)» . W3C . Проверено 17 апреля 2013 г.
- ^ Перейти обратно: а б с «Touch Events версии 2 — черновик редактора W3C» . W3C. 14 ноября 2011 года . Проверено 10 декабря 2011 г.
- ^ «Apple снова использует патенты, чтобы подорвать открытые стандарты» . Opera.com. 9 декабря 2011 года . Проверено 9 декабря 2011 года .
- ^ «События указателя» .
- ^ «IndieUI: События 1.0» .
- ^ «Стандарт HTML» .
- ^ [1] Архивировано 11 июня 2010 г. в Wayback Machine.
- ^ «Какие браузеры поддерживают собственное событие DOMContentLoaded? «Советы по разработке Perfection Labs» . 29 июня 2011 г. Архивировано из оригинала 29 июня 2011 г.
{{cite web}}: CS1 maint: bot: исходный статус URL неизвестен ( ссылка ) - ^ «Перенаправление тест-драйва» . Архивировано из оригинала 8 мая 2010 г. Проверено 6 мая 2010 г.
- ^ «Введение в события» . Quirksmode.org . Проверено 15 сентября 2012 г.
- ^ Перейти обратно: а б «Спецификация событий объектной модели документа (DOM) уровня 2» . W3C . 13 ноября 2000 г. Проверено 15 сентября 2012 г.
- ^ «Спецификация событий объектной модели документа (DOM) уровня 3 (рабочий проект)» . W3C . Проверено 17 апреля 2013 г.
- ^ «Ранние обработчики событий» . Quirksmode.org . Проверено 15 сентября 2012 г.
- ^ «Традиционная модель регистрации событий» . Quirksmode.org . Проверено 15 сентября 2012 г.
- ^ «Поддержка событий DOM уровня 3 в IE9» . Майкрософт . 26 марта 2010 года . Проверено 28 марта 2010 г.
- ^ «Изменения совместимости в предварительной версии IE11» . Майкрософт . 9 сентября 2013 года . Проверено 5 октября 2013 г.
Дальнейшее чтение
[ редактировать ]- Дейтел, Харви. (2002). Интернет и Всемирная паутина: как программировать (второе издание). ISBN 0-13-030897-8
- Организация Мозилла. (2009). Справочник событий DOM . Проверено 25 августа 2009 г.
- Причудливый режим (2008). Таблицы совместимости событий . Проверено 27 ноября 2008 г.
- http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
Внешние ссылки
[ редактировать ]- Спецификация событий уровня 2 объектной модели документа (DOM)
- Объектная модель документа (DOM), события уровня 3, рабочий проект
- DOM4: События (редакторский проект)
- Рабочий проект событий пользовательского интерфейса
- События указателя Рекомендация кандидата W3C
- MSDN PointerEvent
- domevents.dev — визуализатор, позволяющий узнавать о событиях DOM посредством исследования.
- JS-скрипт для всплывания и захвата событий