Событие

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Примечание: Эта функция доступна в Потоках веб-работы.

Интерфейс Event представляет собой событие, которое происходит на EventTarget.

Событие может быть вызвано действием пользователя, например, щелчком мыши или нажатием клавиши, или сгенерировано API для представления прогресса асинхронной задачи. Оно также может быть вызвано программно, например, вызывая метод HTMLElement.click() элемента или определением события, а затем отправкой его на указанную цель с помощью EventTarget.dispatchEvent().

Существует множество типов событий, некоторые из которых используют другие интерфейсы, основанные на основном интерфейсе Event. Сам интерфейс Event содержит свойства и методы, общие для всех событий.

Многие элементы DOM могут быть настроены для приема (или "прослушивания") этих событий и выполнения кода в ответ на обработку (или "обработку") их. Обработчики событий обычно подключаются (или "прикрепляются") к различным HTML-элементам (таким как <button>, <div>, <span>, и т. д.) с помощью EventTarget.addEventListener(), и это, как правило, заменяет использование старых атрибутов обработчика событий HTML обработчика событий. Кроме того, при правильном добавлении такие обработчики также могут быть отключены при необходимости с помощью removeEventListener().

Примечание: Один элемент может иметь несколько таких обработчиков, даже для одного и того же события — особенно если их прикрепляют отдельные независимые модули кода, каждый для своих независимых целей. (Например, веб-страница с рекламным модулем и модулем статистики, оба отслеживающие просмотр видео.)

Когда есть много вложенных элементов, каждый со своим обработчиком (или обработчиками), обработка событий может стать очень сложной — особенно в тех случаях, когда родительский элемент получает то же самое событие, что и его дочерние элементы, потому что "пространственно" они перекрываются, поэтому событие технически происходит в обоих случаях, а порядок обработки таких событий зависит от настроек продувания события каждого обработчика.

Интерфейсы, основанные на событии

Ниже приведен список интерфейсов, которые основаны на основном интерфейсе Event с ссылками на их документацию в справочнике API MDN.

Обратите внимание, что все интерфейсы событий имеют имена, оканчивающиеся на "Event".

Конструктор

Event(): Создает объект Event, возвращая его вызывающей стороне.

Свойства экземпляра

Event.bubbles Только для чтения: Булево значение, указывающее, поднимается ли событие по DOM.
Event.cancelable Только для чтения: Булево значение, указывающее, можно ли отменить событие.
Event.composed Только для чтения: Булево значение, указывающее, может ли событие подниматься через границу между теневым DOM и обычным DOM.
Event.currentTarget Только для чтения: Ссылка на текущую зарегистрированную цель для события. Это объект, которому в данный момент назначено событие. Возможно, это было изменено в процессе перенаправления.
Event.defaultPrevented Только для чтения: Указывает, отменил ли вызов event.preventDefault() событие.
Event.eventPhase Только для чтения: Указывает, какая фаза потока события обрабатывается. Это одно из следующих чисел: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
Event.isTrusted Только для чтения: Указывает, было ли событие инициировано браузером (например, после щелчка пользователя) или скриптом (например, с помощью метода создания события).
Event.srcElement Только для чтения Устарело: Псевдоним для свойства Event.target. Используйте Event.target вместо этого.
Event.target Только для чтения: Ссылка на объект, для которого изначально было отправлено событие.
Event.timeStamp Только для чтения: Время создания события (в миллисекундах). По спецификации, это значение — время с эпохи, но на практике определения браузерами различаются. Кроме того, ведется работа по изменению этого на DOMHighResTimeStamp вместо этого.
Event.type Только для чтения: Имя, идентифицирующее тип события.

Устаревшие и нестандартные свойства

Event.cancelBubble Deprecated: Исторический псевдоним для Event.stopPropagation(), который следует использовать вместо него. Установка его значения в true перед возвратом из обработчика события предотвращает распространение события.
Event.explicitOriginalTarget Non-standard Только для чтения: Явное исходное целевое значение события.
Event.originalTarget Non-standard Только для чтения: Исходное целевое значение события до любых перенаправлений.
Event.returnValue Deprecated: Историческое свойство, которое по-прежнему поддерживается, чтобы гарантировать работу существующих сайтов. Используйте Event.preventDefault() и Event.defaultPrevented вместо него.
Event.scoped Только для чтения Deprecated: Булево значение, указывающее, будет ли данное событие распространяться через корень тени в стандартный DOM. Используйте composed вместо него.

Методы экземпляра

Event.composedPath(): Возвращает путь события (массив объектов, на которых будут вызваны обработчики). Это не включает узлы в деревьях теней, если корень тени был создан с закрытым ShadowRoot.mode.
Event.preventDefault(): Отменяет событие (если оно отменяемо).
Event.stopImmediatePropagation(): Для данного события предотвращает вызов всех остальных обработчиков. Это включает обработчики, прикреплённые к одному и тому же элементу, а также к элементам, которые будут обработаны позднее (например, во время фазы захвата).
Event.stopPropagation(): Прекращает распространение события дальше по DOM.

Методы устаревшие

Event.initEvent() Deprecated: Инициализирует значение созданного события. Если событие уже было отправлено, этот метод ничего не делает. Используйте конструктор (Event() вместо этого).

Спецификации

Спецификация
DOM # interface-event

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android

`Event`	15	12	11	11.6	6	18	14	12	6	1.0	4.4
`Event`	1	12	1	4	1	18	4	10.1	1	1.0	≤37
`bubbles`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`cancelBubble`	1 Начиная с Chrome 58 и Opera 45, установка этого свойства в значение false ничего не делает, согласно обсуждению спецификации.	12	53 1–53 Поддерживается только для `UIEvent`, не для всех объектов `Event`.	≤12.1 Начиная с Chrome 58 и Opera 45, установка этого свойства в значение false ничего не делает, согласно обсуждению спецификации.	1	18 Начиная с Chrome Android 58 и Opera 45, установка этого свойства в значение false ничего не делает, согласно обсуждению спецификации.	53 4–53 Поддерживается только для `UIEvent`, не для всех объектов `Event`.	≤12.1 Начиная с Chrome 58 и Opera 45, установка этого свойства в значение false ничего не делает, согласно обсуждению спецификации.	1	1.0 Начиная с Samsung Internet 7.0 и Opera 45, установка этого свойства в значение false ничего не делает, согласно обсуждению спецификации.	≤37 Начиная с Chrome 58 и Opera 45, установка этого свойства в значение false ничего не делает, согласно обсуждению спецификации.
`cancelable`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`composed`	53	79	52 До Firefox 95 это свойство было некорректно установлено в `false` для элементов `<select>` и `<input type='checkbox'>`.	40	10	53	52 До Firefox для Android 95 это свойство было некорректно установлено в `false` для элементов `<select>` и `<input type='checkbox'>`.	41	10	6.0	53
`composedPath`	5350–53	79	59	4037–40	10	5350–53	59	4137–41	10	6.05.0–6.0	5350–53
`currentTarget`	1	12	1	7	1	18	4	10.1	1	1.0	4.4
`defaultPrevented`	5	12	6	11	5	18	6	11	5	1.0	3
`eventPhase`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	4.4
`explicitOriginalTarget`	Нет	Нет	1.5	Нет	Нет	Нет	4	Нет	Нет	Нет	Нет
`initEvent`	1	12	17 1–17 До Firefox 17 вызов этого метода после отправки события вызывал исключение вместо того, чтобы ничего не делать.	≤12.1	1	18	17 4–17 До Firefox для Android 17 вызов этого метода после отправки события вызывал исключение вместо того, чтобы ничего не делать.	≤12.1	1	1.0	≤37
`isTrusted`	46 Начиная с Chrome 53 и Opera 40, недоверенные события не вызывают действие по умолчанию.	12	1.5	33 Начиная с Chrome 53 и Opera 40, недоверенные события не вызывают действие по умолчанию.	10	46 Начиная с Chrome Android 53 и Opera 40, недоверенные события не вызывают действие по умолчанию.	4	33 Начиная с Chrome 53 и Opera 40, недоверенные события не вызывают действие по умолчанию.	10	5.0 Начиная с Samsung Internet 6.0 и Opera 40, недоверенные события не вызывают действие по умолчанию.	46 Начиная с версии 53, недоверенные события не вызывают действие по умолчанию.
`originalTarget`	Нет	Нет	1.5	Нет	Нет	Нет	4	Нет	Нет	Нет	Нет
`preventDefault`	1	12	1	7	1	18	4	10.1	1	1.0	4.4
`returnValue`	1	12	6663–64	15	1	18	6663–64	14	1	1.0	≤37
`srcElement`	1	12	62	≤12.1	1	18	62	≤12.1	1	1.0	≤37
`stopImmediatePropagation`	5	12	10	≤12.1	5	18	10	≤12.1	5	1.0	≤37
`stopPropagation`	1	12	1	7	1	18	4	10.1	1	1.0	4.4

`target`	1	12	1	7	1	18	4	10.1	1	1.0	4.4
`timeStamp`	1 Начиная с Chrome 49, Firefox 54 и Opera 36, это свойство возвращает `DOMHighResTimeStamp` вместо `DOMTimeStamp`.	12	1.5 Начиная с Chrome 49, Firefox 54 и Opera 36, это свойство возвращает `DOMHighResTimeStamp` вместо `DOMTimeStamp`.	≤12.1 Начиная с Chrome 49, Firefox 54 и Opera 36, это свойство возвращает `DOMHighResTimeStamp` вместо `DOMTimeStamp`.	1	18 Начиная с Chrome Android 49, Firefox 54 и Opera 36, это свойство возвращает `DOMHighResTimeStamp` вместо `DOMTimeStamp`.	4 Начиная с Chrome 49, Firefox для Android 54 и Opera 36, это свойство возвращает `DOMHighResTimeStamp` вместо `DOMTimeStamp`.	≤12.1 Начиная с Chrome 49, Firefox 54 и Opera 36, это свойство возвращает `DOMHighResTimeStamp` вместо `DOMTimeStamp`.	1	1.0 Начиная с Samsung Internet 5.0, Firefox 54 и Opera 36, это свойство возвращает `DOMHighResTimeStamp` вместо `DOMTimeStamp`.	1 Начиная с версии 49, это свойство возвращает `DOMHighResTimeStamp` вместо `DOMTimeStamp`.
`type`	1	12	1.5	7	1	18	4	10.1	1	1.0	4.4

См. также

Типы доступных событий: Справочник по событиям
Урок: Введение в события
Урок: Пузырение событий
Создание и вызов пользовательских событий

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Event