Event
Event
接口表示在 DOM 中出现的事件。
一些事件是由用户触发的,例如鼠标或键盘事件;而其他事件常由 API 生成,例如指示动画已经完成运行的事件,视频已被暂停等等。事件也可以通过脚本代码触发,例如对元素调用 HTMLElement.click()
方法,或者定义一些自定义事件,再使用 EventTarget.dispatchEvent()
方法将自定义事件派发往指定的目标(target)。
有许多不同类型的事件,其中一些使用基于 Event
主接口的二次接口。Event
本身包含适用于所有事件的属性和方法。
很多 DOM 元素可以被设计接收 (或者监听) 这些事件,并且执行代码去响应(或者处理)它们。通过EventTarget.addEventListener()
方法可以将事件处理函数绑定到不同的HTML elements上 (比如<button>
, <div>
, <span>
等等) 。这种绑定事件处理函数的方式基本替换了老版本中使用 HTML event handler attributes (en-US)来绑定事件处理函数的方式。除此之外,通过正确使用removeEventListener()
方法,这些事件处理函数也能被移除。
备注: 一个元素可以绑定多个事件处理函数,甚至是同一种类型的事件。尤其是这种分离的,并且相互独立的代码模块对同一个元素绑定事件处理函数,每一个模块代码都有着独立的目的。(比如,一个网页同时有着广告模块和统计模块同时监听视频播放元素)
当有很多嵌套的元素,并且每一个元素都有着自己的事件处理函数,事件处理过程会变得非常复杂。尤其当一个父元素和子元素绑定有相同类型的事件处理函数的时候。因为结构上的重叠,事件处理函数可能会依次被触发,触发的顺序取决于事件冒泡和事件捕获在每一个元素上的设置情况。
基于 Event
的接口
下面是主要基于Event
接口的接口列表,每一个接口都设置了指向各自的 MDN API 说明的文档链接。
需要注意的是,所有的事件接口名称都是以“Event”结尾的。
AnimationEvent
AudioProcessingEvent
(en-US)BeforeInputEvent
BeforeUnloadEvent
BlobEvent
(en-US)ClipboardEvent
CloseEvent
CompositionEvent
CSSFontFaceLoadEvent
CustomEvent
DeviceLightEvent
DeviceMotionEvent
DeviceOrientationEvent
DeviceProximityEvent
DOMTransactionEvent
DragEvent
EditingBeforeInputEvent
ErrorEvent
FetchEvent
FocusEvent
GamepadEvent
HashChangeEvent
IDBVersionChangeEvent
(en-US)InputEvent
KeyboardEvent
MediaStreamEvent
MessageEvent
MouseEvent
MutationEvent
(en-US)OfflineAudioCompletionEvent
(en-US)OverconstrainedError
(en-US)PageTransitionEvent
PaymentRequestUpdateEvent
(en-US)PointerEvent
PopStateEvent
(en-US)ProgressEvent
RelatedEvent
RTCDataChannelEvent
(en-US)RTCIdentityErrorEvent
RTCIdentityEvent
RTCPeerConnectionIceEvent
(en-US)SensorEvent
StorageEvent
SVGEvent
SVGZoomEvent
TimeEvent
(en-US)TouchEvent
TrackEvent
(en-US)TransitionEvent
UIEvent
UserProximityEvent
(en-US)WebGLContextEvent
WheelEvent
构造器
Event()
-
创建并返回一个
Event
对象。
属性
Event.bubbles
只读-
一个布尔值,用来表示该事件是否会在 DOM 中冒泡。
Event.cancelBubble
-
Event.stopPropagation()
的历史别名。在事件处理器函数返回之前,将此属性的值设置为true
,亦可阻止事件继续冒泡。 Event.cancelable
只读-
一个布尔值,表示事件是否可以取消。
Event.composed
只读-
一个布尔值,表示事件是否可以穿过 Shadow DOM 和常规 DOM 之间的隔阂进行冒泡。
Event.currentTarget
只读-
对事件当前注册的目标的引用。这是一个当前计划将事件发送到的对象。它是有可能在重定向的过程中被改变的。
Event.deepPath
(en-US) 非标准Event.defaultPrevented
只读-
一个布尔值,表示
event.preventDefault()
方法是否取消了事件的默认行为。 Event.eventPhase
只读-
表示事件流正被处理到了哪个阶段。
Event.explicitOriginalTarget
(en-US) 非标准 只读-
事件的明确(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
(en-US) 只读 已弃用-
已废弃,使用
Event.composed
代替此属性。 一个布尔值
,表示给定的事件是否会穿过 Shadow DOM,进入到标准 DOM 中。
方法
Event.createEvent()
(en-US) 已弃用-
创建一个新事件,如果使用此方法创建事件,则必须调用其自身的
initEvent()
方法,对其进行初始化。 Event.composedPath()
-
返回事件的路径(将在该对象上调用监听器)。如果阴影根节点 (shadow root) 创建时
ShadowRoot.mode
值为 closed,那么路径不会包括该根节点下阴影树 (shadow tree) 的节点。 event.initEvent
已弃用-
为通过
Event.createEvent()
(en-US) 创建的事件初始化。该方法对已经被派发的事件无效。 event.preventDefault
-
取消事件(如果该事件可取消)。
event.stopImmediatePropagation
-
对这个特定的事件而言,没有其他监听器被调用。这个事件既不会添加到相同的元素上,也不会添加到以后将要遍历的元素上(例如在捕获阶段)。
event.stopPropagation
-
停止冒泡,阻止事件在 DOM 中继续冒泡。
废弃方法
Event.getPreventDefault()
非标准-
非标准方法;使用
Event.defaultPrevented
属性代替此方法。 返回Event.defaultPrevented
的值。 event.preventBubble
已弃用-
已废弃;使用
event.stopPropagation
代替此方法。 阻止事件继续冒泡。 event.preventCapture
已弃用-
已废弃;使用
event.stopPropagation
代替此方法。
规范
Specification |
---|
DOM Standard # interface-event |
浏览器兼容性
BCD tables only load in the browser
参考
- 可用的事件类型:Event 参考 (en-US)
- Event 目标的比较(目标
target
vs 当前目标currentTarget
vs 相关目标relatedTarget
vs 初始目标originalTarget
) - 创建和触发自定义事件 (en-US)
- Firefox 拓展开发: