DOM-событие

События DOM (объектная модель документа) — это сигнал о том, что что-то произошло или происходит, и могут быть вызваны взаимодействием пользователя или браузером. ^{[ 1 ]} на стороне клиента, Языки сценариев такие как JavaScript , JScript , VBScript и Java, могут регистрировать различные обработчики событий или прослушиватели на узлах элементов внутри дерева DOM , например, в HTML , XHTML , XUL и SVG документах .

Примеры событий DOM:

Когда пользователь щелкает мышью
Когда веб-страница загрузилась
Когда изображение загружено
Когда мышь перемещается по элементу
Когда поле ввода изменено
При отправке HTML-формы
Когда пользователь нажимает клавишу ^{[ 2 ]}

Исторически, как и DOM, модели событий, используемые различными веб-браузерами, имели некоторые существенные различия, которые вызывали проблемы совместимости. Чтобы бороться с этим, модель событий была стандартизирована Консорциумом World Wide Web (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-фрейм/объект	останавливаться	неудержимый	Срабатывает, когда пользователь прекращает загрузку объекта. (в отличие от прерывания, событие остановки можно прикрепить к документу)	Нет	Нет
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
AttachEvent	Аналогично методу addEventListener W3C.	Указатель	fpNotify
отсоединитьСобытие	Аналогично методу RemoveEventListener W3C.	Нить	sEvent
отсоединитьСобытие	Аналогично методу RemoveEventListener W3C.	Указатель	fpNotify
FireEvent	Аналогично методу диспетчеризации W3C.	Нить	sEvent
FireEvent	Аналогично методу диспетчеризации W3C.	Событие	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/

Внешние ссылки

[1] «ДОМ Стандарт» . dom.spec.whatwg.org . Проверено 25 мая 2021 г.

[2] «События JavaScript DOM» . www.w3schools.com . Проверено 3 августа 2019 г.

[3] «7.8 Перетаскивание — HTML5» .

[4] «HTML API перетаскивания» . 28 марта 2024 г.

[5] «События прогресса» .

[6] «Файловый API» .

[7] «Элемент: событие Mousemove — веб-API | MDN» . 22 декабря 2023 г.

[8] «Спецификация событий объектной модели документа (DOM) уровня 3 (рабочий проект)» . W3C . Проверено 17 апреля 2013 г.

[w3c_v2-9] Перейти обратно: ^а ^б ^с «Touch Events версии 2 — черновик редактора W3C» . W3C. 14 ноября 2011 года . Проверено 10 декабря 2011 г.

[opera-10] «Apple снова использует патенты, чтобы подорвать открытые стандарты» . Opera.com. 9 декабря 2011 года . Проверено 9 декабря 2011 г.

[11] «События указателя» .

[12] «IndieUI: События 1.0» .

[13] «Стандарт HTML» .

[14] [1] Архивировано 11 июня 2010 г. в Wayback Machine.

[15] «Какие браузеры поддерживают собственное событие DOMContentLoaded? «Советы по разработке Perfection Labs» . 29 июня 2011 г. Архивировано из оригинала 29 июня 2011 г. {{cite web}}: CS1 maint: bot: исходный статус URL неизвестен ( ссылка )

[16] «Перенаправление тест-драйва» . Архивировано из оригинала 8 мая 2010 г. Проверено 6 мая 2010 г.

[quirksmode-17] «Введение в события» . Quirksmode.org . Проверено 15 сентября 2012 г.

[dom2-events-18] Перейти обратно: ^а ^б «Спецификация событий объектной модели документа (DOM) уровня 2» . W3C . 13 ноября 2000 г. Проверено 15 сентября 2012 г.

[19] «Спецификация событий объектной модели документа (DOM) уровня 3 (рабочий проект)» . W3C . Проверено 17 апреля 2013 г.

[20] «Ранние обработчики событий» . Quirksmode.org . Проверено 15 сентября 2012 г.

[21] «Традиционная модель регистрации событий» . Quirksmode.org . Проверено 15 сентября 2012 г.

[22] «Поддержка событий DOM уровня 3 в IE9» . Майкрософт . 26 марта 2010 года . Проверено 28 марта 2010 г.

[23] «Изменения совместимости в предварительной версии IE11» . Майкрософт . 9 сентября 2013 года . Проверено 5 октября 2013 г.

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

[ 5 ]

[ 6 ]

[ 7 ]

[ 8 ]

[ 9 ]

[ 10 ]

[ 11 ]

[ 12 ]

[ 13 ]

[ 14 ]

[ 15 ]

[ 16 ]

[ 17 ]

[ 18 ]

[ 19 ]

[ 20 ]

[ 21 ]

[ 22 ]

[ 23 ]