Event

翻译不完整。 请帮助我们翻译这篇文章!

Event 接口表示在 DOM 中出现的事件。

一些事件是由用户触发的,例如鼠标或键盘事件;而其他事件常由 API 生成,例如指示动画已经完成运行的事件,视频已被暂停等等。事件也可以通过脚本代码触发,例如对元素调用 HTMLElement.click() 方法,或者定义一些自定义事件,再使用 EventTarget.dispatchEvent() 方法将自定义事件派发往指定的目标(target)。

有许多不同类型的事件,其中一些使用基于 Event 主接口的二次接口。Event 本身包含适用于所有事件的属性和方法。

很多DOM元素可以被设计接收(或者监听) 这些事件, 并且执行代码去响应(或者处理)它们。通过EventTarget.addEventListener()方法可以将事件处理函数绑定到不同的HTML elements上 (比如<button>, <div>, <span>等等) 。这种绑定事件处理函数的方式基本替换了老版本中使用HTML event handler attributes来绑定事件处理函数的方式。除此之外,通过正确使用removeEventListener()方法,这些事件处理函数也能被移除。

Note: 一个元素可以绑定多个事件处理函数,甚至是同一种类型的事件。尤其是这种分离的,并且相互独立的代码模块对同一个元素绑定事件处理函数,每一个模块代码都有着独立的目的。(比如,一个网页同时有着广告模块和统计模块同时监听视频播放元素)

当有很多嵌套的元素,并且每一个元素都有着自己的事件处理函数,事件处理过程会变得非常复杂。尤其当一个父元素和子元素绑定有相同类型的事件处理函数的时候。因为结构上的重叠,事件处理函数可能会依次被触发,触发的顺序取决于事件冒泡和事件捕获在每一个元素上的设置情况。

基于 Event 的接口

下面是主要基于Event接口的接口列表,每一个接口都设置了指向各自的MDN API说明的文档链接。

需要注意的是,所有的事件接口名称都是以“Event”结尾的。

构造器

Event()
创建并返回一个 Event 对象。

属性

Event.bubbles 只读
一个布尔值,用来表示该事件是否会在 DOM 中冒泡。
Event.cancelBubble
Event.stopPropagation() 的历史别名。在事件处理器函数返回之前,将此属性的值设置为 true,亦可阻止事件继续冒泡。
Event.cancelable 只读
一个布尔值,表示事件是否可以取消。
Event.composed 只读
一个布尔值,表示事件是否可以穿过 Shadow DOM 和常规 DOM 之间的隔阂进行冒泡。
Event.currentTarget 只读
对事件当前注册的目标的引用。这是一个当前计划将事件发送到的对象。它是有可能在重定向的过程中被改变的。
Event.deepPath
一个由事件流所经过的 DOM 节点组成的数组
Event.defaultPrevented 只读
一个布尔值,表示 event.preventDefault() 方法是否取消了事件的默认行为。
Event.eventPhase 只读
表示事件流正被处理到了哪个阶段。
Event.explicitOriginalTarget 只读
事件的明确(explicit)原始目标(Mozilla 专有属性)。
Event.originalTarget 只读
重设目标前的事件原始目标 (Mozilla 专有属性)。
Event.returnValue
旧版 Internet Explorer 引入的一个非标准历史属性,为保证依赖此属性的网页正常运作,此属性最终被收入规范。可用 Event.preventDefault()Event.defaultPrevented 代替,但由于已进入规范,也可以使用此属性。
Event.srcElement
旧版 Internet Explorer 对 Event.target 的非标准别称。出于兼容原因,一些其他浏览器也支持此别称。
Event.target 只读
对事件原始目标的引用,这里的原始目标指最初派发(dispatch)事件时指定的目标。
Event.timeStamp 只读
事件创建时的时间戳(精度为毫秒)。按照规范,这个时间戳是 Unix 纪元起经过的毫秒数,但实际上,在不同的浏览器中,对此时间戳的定义也有所不同。另外,规范正在将其修改为 DOMHighResTimeStamp
Event.type 只读
事件的类型,不区分大小写。
Event.isTrusted 只读
表示事件是由浏览器(例如用户点击)发起的,还是由脚本(使用事件创建方法,例如 Event.initEvent)发出的。

废弃属性

Event.scoped 只读
已废弃,使用 Event.composed 代替此属性。
一个布尔值,表示给定的事件是否会穿过 Shadow DOM,进入到标准 DOM 中。

方法

Event.createEvent()
创建一个新事件,如果使用此方法创建事件,则必须调用其自身的 initEvent() 方法,对其进行初始化。
Event.composedPath()
返回事件的路径(将在该对象上调用监听器)。如果阴影根节点 (shadow root) 创建时 ShadowRoot.mode 值为 closed,那么路径不会包括该根节点下阴影树 (shadow tree) 的节点。
event.initEvent
为通过 Event.createEvent() 创建的事件初始化。该方法对已经被派发的事件无效。
event.preventDefault
取消事件(如果该事件可取消)。
event.stopImmediatePropagation
对这个特定的事件而言,没有其他监听器被调用。这个事件既不会添加到相同的元素上,也不会添加到以后将要遍历的元素上(例如在捕获阶段)。
event.stopPropagation
停止冒泡,阻止事件在 DOM 中继续冒泡。

废弃方法

Event.getPreventDefault()
非标准方法;使用 Event.defaultPrevented 属性代替此方法。
返回 Event.defaultPrevented 的值。
event.preventBubble 已废弃 Gecko 24
已废弃;使用 event.stopPropagation 代替此方法。
阻止事件继续冒泡。
event.preventCapture 已废弃 Gecko 24
已废弃;使用 event.stopPropagation 代替此方法。

规范

规范 状态 备注
DOM
Event
Living Standard

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
EventChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 4Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Event() constructorChrome Full support 15Edge Full support ≤18Firefox Full support 11IE No support NoOpera Full support 11.6Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support 12Safari iOS Full support 6Samsung Internet Android Full support 1.0
bubblesChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
cancelableChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
cancelBubbleChrome Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Edge Full support 12Firefox Full support 53
Notes
Full support 53
Notes
Notes Prior to Firefox 53, this property was defined on the UIEvent interface. See bug 1298970 for more details.
IE Full support YesOpera Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Safari Full support YesWebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Firefox Android Full support 53
Notes
Full support 53
Notes
Notes Prior to Firefox 53, this property was defined on the UIEvent interface. See bug 1298970 for more details.
Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Safari iOS Full support YesSamsung Internet Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Samsung Internet 7.0 and Opera 45, setting this property to false does nothing, as per spec discussion.
composedChrome Full support 53Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 40Safari Full support YesWebView Android Full support 53Chrome Android Full support 53Firefox Android Full support 52Opera Android Full support 41Safari iOS Full support YesSamsung Internet Android Full support 6.0
composedPathChrome Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 40
Full support 40
No support 37 — 40
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Safari Full support 10WebView Android Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Chrome Android Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Firefox Android Full support 52Opera Android Full support 41
Full support 41
No support 37 — 41
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Safari iOS Full support 10Samsung Internet Android Full support 6.0
Full support 6.0
No support 5.0 — 6.0
Alternate Name
Alternate Name Uses the non-standard name: deepPath
currentTargetChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9
Full support 9
No support 6 — 9
Notes
Notes On Internet Explorer 6 through 8, the event model is different. Event listeners are attached with the non-standard EventTarget.attachEvent method. In this model, there is no equivalent to event.currentTarget and this is the global object. One solution to emulate the event.currentTarget feature is to wrap your handler in a function calling the handler using Function.prototype.call with the element as a first argument. This way, this will be the expected value.
Opera Full support 7Safari Full support 10WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 10Samsung Internet Android Full support 1.0
defaultPreventedChrome Full support 18Edge Full support 12Firefox Full support 6IE Full support 9Opera Full support 11Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 5Samsung Internet Android Full support 1.0
eventPhaseChrome Full support 45Edge Full support 12Firefox Full support YesIE Full support 9Opera Full support 32Safari Full support YesWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android Full support 32Safari iOS Full support YesSamsung Internet Android Full support 5.0
explicitOriginalTarget
Non-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
getPreventDefault
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support ? — 59
Notes
No support ? — 59
Notes
Notes See bug 691151.
IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android No support ? — 59
Notes
No support ? — 59
Notes
Notes See bug 691151.
Opera Android No support NoSafari iOS ? Samsung Internet Android No support No
initEvent
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support 17
Full support 17
No support ? — 17
Notes
Notes Before Firefox 17, a call to this method after the dispatching of the event raised an exception instead of doing nothing.
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 17
Full support 17
No support ? — 17
Notes
Notes Before Firefox 17, a call to this method after the dispatching of the event raised an exception instead of doing nothing.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
isTrustedChrome Full support 46
Notes
Full support 46
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Edge Full support 12Firefox Full support YesIE No support No
Notes
No support No
Notes
Notes In Internet Explorer, all events are trusted except those that are created with the createEvent() method.
Opera Full support 33
Notes
Full support 33
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Safari Full support 10WebView Android Full support 46
Notes
Full support 46
Notes
Notes Starting with version 53, untrusted events do not invoke the default action.
Chrome Android Full support 46
Notes
Full support 46
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Firefox Android Full support YesOpera Android Full support 33
Notes
Full support 33
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Safari iOS Full support 10Samsung Internet Android Full support 5.0
Notes
Full support 5.0
Notes
Notes Starting with Samsung Internet 6.0 and Opera 40, untrusted events do not invoke the default action.
originalTarget
Non-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
preventBubble
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support ? — 24IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android No support ? — 24Opera Android No support NoSafari iOS ? Samsung Internet Android No support No
preventCapture
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support ? — 24IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android No support ? — 24Opera Android No support NoSafari iOS ? Samsung Internet Android No support No
preventDefaultChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
returnValue
Deprecated
Chrome Full support YesEdge Full support 12Firefox No support No
Notes
No support No
Notes
Notes Temporarily added in 63, removed in 64, briefly added in 65, then removed again while related compatibility issues are sorted out (see bug 1520756).
IE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android No support No
Notes
No support No
Notes
Notes Temporarily added in 63, removed in 64, briefly added in 65, then removed again while related compatibility issues are sorted out (see bug 1520756).
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
srcElement
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support 62IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 62Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
stopImmediatePropagationChrome Full support 6Edge Full support 12Firefox Full support 10IE Full support 9Opera Full support 15Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 10Opera Android Full support 14Safari iOS Full support 5Samsung Internet Android Full support 1.0
stopPropagationChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
targetChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
timeStampChrome Full support 49
Notes
Full support 49
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Edge Full support 12Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
IE Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Opera Full support 36
Notes
Full support 36
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Safari Full support YesWebView Android Full support 49
Notes
Full support 49
Notes
Notes Starting with version 49, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Chrome Android Full support 49
Notes
Full support 49
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Firefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Opera Android Full support 36
Notes
Full support 36
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Safari iOS Full support YesSamsung Internet Android Full support 5.0
Notes
Full support 5.0
Notes
Notes Starting with Samsung Internet 5.0, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
typeChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

参考