Event
        
        
          
                Baseline
                
                  Widely available
                
                
              
        
        
        
          
                
              
                
              
                
              
        
        
      
      This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
备注: 此特性在 Web Worker 中可用。
Event 接口表示在 EventTarget 上出现的事件。
一些事件是由用户触发的,例如鼠标或键盘事件;或者由 API 生成以表示异步任务的进度。事件也可以通过编程方式触发,例如对元素调用 HTMLElement.click() 方法,或者定义一些自定义事件,再使用 EventTarget.dispatchEvent() 方法将自定义事件派发往指定的目标(target)。
有许多不同类型的事件,其中一些使用基于 Event 主接口的其他接口。Event 本身包含适用于所有事件的属性和方法。
很多 DOM 元素可以被设计接收 (或者监听) 这些事件,并且执行代码去响应(或者处理)它们。通过 EventTarget.addEventListener() 方法可以将事件处理器绑定到不同的 HTML 元素上(比如 <button>、<div>、<span> 等等)。这种方式基本替换了老版本中使用 HTML 事件处理器属性的方式。此外,在正确添加后,还可以使用 removeEventListener() 方法移除这些事件处理器。
备注:一个元素可以绑定多个事件处理器,甚至是对于完全相同的事件。尤其是相互独立的代码模块出于不同的目的附加事件处理器。(比如,一个网页同时有着广告模块和统计模块同时监听视频播放。)
当有很多嵌套的元素,每个元素都有着自己的事件处理器,事件处理过程会变得非常复杂。尤其当一个父元素和子元素绑定完全相同的事件时,因为结构上的重叠,事件在技术层面发生在两个元素中,触发的顺序取决于每个处理器的事件冒泡的设置。
基于 Event 的接口
下面是基于 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
- TimeEvent
- TouchEvent
- TrackEvent
- TransitionEvent
- UIEvent
- WebGLContextEvent
- WheelEvent
构造函数
- Event()
- 
创建并返回一个 Event对象。
实例属性
- Event.bubbles只读
- 
一个布尔值,用来表示该事件是否会在 DOM 中冒泡。 
- Event.cancelable只读
- 
一个布尔值,表示事件是否可以取消。 
- Event.composed只读
- 
一个布尔值,表示事件是否可以穿过 Shadow DOM 和常规 DOM 之间的边界进行冒泡。 
- Event.currentTarget只读
- 
对事件当前注册的目标的引用。这是一个当前计划将事件发送到的对象。它是有可能在重定向(retarget)的过程中被改变的。 
- Event.defaultPrevented只读
- 
一个布尔值,表示 event.preventDefault()方法是否取消了事件的默认行为。
- Event.eventPhase只读
- 
指示正在处理的事件流阶段。它是以下数字之一: NONE、CAPTURING_PHASE、AT_TARGET、BUBBLING_PHASE。
- Event.isTrusted只读
- 
表示事件是由浏览器(例如用户点击)发起的,还是由脚本发起的(例如使用事件创建方法)。 
- Event.target只读
- 
对最初分发事件的对象的引用。 
- Event.timeStamp只读
- 
事件创建时的时间戳(精度为毫秒)。按照规范,这个时间戳是 Unix 纪元起经过的毫秒数,但实际上,在不同的浏览器中,对此时间戳的定义也有所不同。另外,规范正在将其修改为 DOMHighResTimeStamp。
- Event.type只读
- 
事件的类型的名称。 
遗留属性和非标准属性
- Event.cancelBubble已弃用
- 
Event.stopPropagation()的历史别名,应该改用。在事件处理程序返回之前将其值设置为true可以阻止事件传播。
- Event.explicitOriginalTarget非标准 只读
- 
事件的明确原始目标。 
- Event.originalTarget非标准 只读
- 
重定向目标前的事件原始目标。 
- Event.returnValue已弃用
- 
为了确保现有网站继续工作,而仍然支持的历史属性。请改用 Event.preventDefault()和Event.defaultPrevented。
- Event.scoped只读 已弃用
- 
一个布尔值,指示给定事件是否会穿过影子根节点冒泡到标准 DOM。请改用 composed。
实例方法
- Event.composedPath()
- 
返回事件的路径(将在该对象上调用监听器)。如果阴影根(shadow root)节点创建时 ShadowRoot.mode值为 closed,那么路径不会包括该根节点下影子树(shadow tree)的节点。
- event.preventDefault
- 
取消事件(如果该事件可取消)。 
- event.stopImmediatePropagation
- 
对这个特定的事件而言,没有其他监听器被调用。这个事件既不会添加到相同的元素上,也不会添加到以后将要遍历的元素上(例如在捕获阶段)。 
- event.stopPropagation
- 
停止冒泡,阻止事件在 DOM 中继续冒泡。 
弃用方法
- Event.initEvent()已弃用
- 
初始化创建的事件的值。如果事件已经被分派,则此方法不执行任何操作。请改用构造函数( Event())。
规范
| Specification | 
|---|
| DOM> # interface-event> | 
浏览器兼容性
Loading…
参见
- 可用的事件类型:Event 参考
- 事件介绍
- 事件冒泡
- 创建和触发自定义事件