事件
注意:此功能在 Web Workers 中可用。
Event
接口表示发生在 EventTarget
上的事件。
事件可以由用户操作触发,例如点击鼠标按钮或点击键盘,也可以由 API 生成以表示异步任务的进度。 它也可以以编程方式触发,例如通过调用元素的 HTMLElement.click()
方法,或者通过定义事件,然后使用 EventTarget.dispatchEvent()
将其发送到指定的 target。
事件有很多类型,其中一些使用基于主 Event
接口的其他接口。 Event
本身包含所有事件通用的属性和方法。
许多 DOM 元素可以设置为接受(或“监听”)这些事件,并执行代码以响应处理(或“处理”)它们。 事件处理程序通常使用 EventTarget.addEventListener()
连接(或“附加”)到各种 HTML 元素(例如 <button>
、<div>
、<span>
等),这通常取代使用旧的 HTML 事件处理程序属性。 此外,当正确添加时,如果需要,可以使用 removeEventListener()
断开此类处理程序的连接。
注意:一个元素可以有几个这样的处理程序,即使是针对完全相同的事件也是如此——特别是如果单独的独立代码模块分别附加它们,每个模块都有其自己的独立目的。(例如,一个网页上的广告模块和统计模块都监视视频观看。)
当有多个嵌套元素,每个元素都有自己的处理程序时,事件处理会变得非常复杂——尤其是在父元素接收到与子元素完全相同的事件时,因为“空间上”它们重叠,因此事件技术上发生在两者中,并且此类事件的处理顺序取决于每个触发的处理程序的 事件冒泡 设置。
基于事件的接口
以下是基于主 Event
接口的接口列表,以及指向 MDN API 参考中各自文档的链接。
请注意,所有事件接口的名称都以“Event”结尾。
AnimationEvent
AudioProcessingEvent
已弃用BeforeUnloadEvent
BlobEvent
ClipboardEvent
CloseEvent
CompositionEvent
CustomEvent
DeviceMotionEvent
DeviceOrientationEvent
DragEvent
ErrorEvent
FetchEvent
FocusEvent
FontFaceSetLoadEvent
FormDataEvent
GamepadEvent
HashChangeEvent
HIDInputReportEvent
IDBVersionChangeEvent
InputEvent
KeyboardEvent
MediaStreamEvent
已弃用MessageEvent
MouseEvent
MutationEvent
已弃用OfflineAudioCompletionEvent
PageTransitionEvent
PaymentRequestUpdateEvent
PointerEvent
PopStateEvent
ProgressEvent
RTCDataChannelEvent
RTCPeerConnectionIceEvent
StorageEvent
SubmitEvent
SVGEvent
已弃用TimeEvent
TouchEvent
TrackEvent
TransitionEvent
UIEvent
WebGLContextEvent
WheelEvent
构造函数
Event()
-
创建
Event
对象,将其返回给调用方。
实例属性
Event.bubbles
只读-
一个布尔值,指示事件是否在 DOM 中冒泡。
Event.cancelable
只读-
一个布尔值,指示事件是否可取消。
Event.composed
只读-
一个布尔值,指示事件是否可以在 Shadow DOM 和普通 DOM 之间的边界处冒泡。
Event.currentTarget
只读-
对事件当前注册的 target 的引用。 这是事件当前计划发送到的对象。 可能通过重新定位在中途更改了它。
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
已弃用-
这是
Event.stopPropagation()
的历史别名,建议使用它。在从事件处理程序返回之前将它的值设置为true
可以阻止事件的传播。 Event.explicitOriginalTarget
非标准 只读-
事件的显式原始目标。
Event.originalTarget
非标准 只读-
事件的原始目标,在任何重新定位之前。
Event.returnValue
已弃用-
这是一个为了确保现有网站继续工作而仍然支持的历史属性。请使用
Event.preventDefault()
和Event.defaultPrevented
代替。 Event.scoped
只读 已弃用-
一个布尔值,指示给定事件是否会通过阴影根节点冒泡到标准 DOM 中。请使用
composed
代替。
实例方法
Event.composedPath()
-
返回事件的路径(一个包含将调用监听器的对象的数组)。如果阴影根节点是用
ShadowRoot.mode
创建的,则不包含阴影树中的节点。 Event.preventDefault()
-
取消事件(如果事件是可取消的)。
Event.stopImmediatePropagation()
-
对于此特定事件,阻止所有其他监听器被调用。这包括附加到相同元素的监听器,以及附加到稍后将被遍历的元素的监听器(例如,在捕获阶段)。
Event.stopPropagation()
-
停止事件在 DOM 中的进一步传播。
已弃用的方法
Event.initEvent()
已弃用-
初始化已创建的事件的值。如果事件已发出,此方法不会执行任何操作。请使用构造函数(
Event()
代替)。
规范
规范 |
---|
DOM 标准 # interface-event |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参见
- 可用事件类型:事件参考
- 事件简介
- 事件冒泡
- 创建和触发自定义事件