---
title: Event
slug: Web/API/Event
tags:
  - API
  - DOM
  - 事件
  - 参考
  - 接口
  - 构造器
translation_of: Web/API/Event
---
<div>{{APIRef("DOM")}}</div>

<p><span class="seoSummary"><strong><code>Event</code></strong> 接口表示在 DOM 中出现的事件。</span></p>

<p>一些事件是由用户触发的，例如鼠标或键盘事件；而其他事件常由 API 生成，例如指示动画已经完成运行的事件，视频已被暂停等等。事件也可以通过脚本代码触发，例如对元素调用 <code><a href="/en-US/docs/Web/API/HTMLElement/click">HTMLElement.click()</a></code> 方法，或者定义一些自定义事件，再使用 <code><a href="/en-US/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a></code> 方法将自定义事件派发往指定的目标（target）。</p>

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

<p>很多DOM元素可以被设计接收(或者监听) 这些事件, 并且执行代码去响应（或者处理）它们。通过<code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target.">EventTarget.addEventListener()</a></code>方法可以将事件处理函数绑定到不同的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML elements</a>上 (比如<code>&lt;button&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>等等) 。这种绑定事件处理函数的方式基本替换了老版本中使用HTML <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">event handler attributes</a>来绑定事件处理函数的方式。除此之外，通过正确使用<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener" title="The EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener(). The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal"><code>removeEventListener()</code></a>方法，这些事件处理函数也能被移除。</p>

<div class="blockIndicator note">
<p><strong>Note:</strong> 一个元素可以绑定多个事件处理函数，甚至是同一种类型的事件。尤其是这种分离的，并且相互独立的代码模块对同一个元素绑定事件处理函数，每一个模块代码都有着独立的目的。（比如，一个网页同时有着广告模块和统计模块同时监听视频播放元素）</p>
</div>

<p>当有很多嵌套的元素，并且每一个元素都有着自己的事件处理函数，事件处理过程会变得非常复杂。尤其当一个父元素和子元素绑定有相同类型的事件处理函数的时候。因为结构上的重叠，事件处理函数可能会依次被触发，触发的顺序取决于<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">事件冒泡和事件捕获</a>在每一个元素上的设置情况。</p>

<h2 id="基于_Event_的接口">基于 <code>Event</code> 的接口</h2>

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

<p>需要注意的是，所有的事件接口名称都是以“Event”结尾的。</p>

<div class="index">
<ul>
 <li>{{domxref("AnimationEvent")}}</li>
 <li>{{domxref("AudioProcessingEvent")}}</li>
 <li>{{domxref("BeforeInputEvent")}}</li>
 <li>{{domxref("BeforeUnloadEvent")}}</li>
 <li>{{domxref("BlobEvent")}}</li>
 <li>{{domxref("ClipboardEvent")}}</li>
 <li>{{domxref("CloseEvent")}}</li>
 <li>{{domxref("CompositionEvent")}}</li>
 <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
 <li>{{domxref("CustomEvent")}}</li>
 <li>{{domxref("DeviceLightEvent")}}</li>
 <li>{{domxref("DeviceMotionEvent")}}</li>
 <li>{{domxref("DeviceOrientationEvent")}}</li>
 <li>{{domxref("DeviceProximityEvent")}}</li>
 <li>{{domxref("DOMTransactionEvent")}}</li>
 <li>{{domxref("DragEvent")}}</li>
 <li>{{domxref("EditingBeforeInputEvent")}}</li>
 <li>{{domxref("ErrorEvent")}}</li>
 <li>{{domxref("FetchEvent")}}</li>
 <li>{{domxref("FocusEvent")}}</li>
 <li>{{domxref("GamepadEvent")}}</li>
 <li>{{domxref("HashChangeEvent")}}</li>
 <li>{{domxref("IDBVersionChangeEvent")}}</li>
 <li>{{domxref("InputEvent")}}</li>
 <li>{{domxref("KeyboardEvent")}}</li>
 <li>{{domxref("MediaStreamEvent")}}</li>
 <li>{{domxref("MessageEvent")}}</li>
 <li>{{domxref("MouseEvent")}}</li>
 <li>{{domxref("MutationEvent")}}</li>
 <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
 <li>{{domxref("OverconstrainedError")}}</li>
 <li>{{domxref("PageTransitionEvent")}}</li>
 <li>{{domxref("PaymentRequestUpdateEvent")}}</li>
 <li>{{domxref("PointerEvent")}}</li>
 <li>{{domxref("PopStateEvent")}}</li>
 <li>{{domxref("ProgressEvent")}}</li>
 <li>{{domxref("RelatedEvent")}}</li>
 <li>{{domxref("RTCDataChannelEvent")}}</li>
 <li>{{domxref("RTCIdentityErrorEvent")}}</li>
 <li>{{domxref("RTCIdentityEvent")}}</li>
 <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
 <li>{{domxref("SensorEvent")}}</li>
 <li>{{domxref("StorageEvent")}}</li>
 <li>{{domxref("SVGEvent")}}</li>
 <li>{{domxref("SVGZoomEvent")}}</li>
 <li>{{domxref("TimeEvent")}}</li>
 <li>{{domxref("TouchEvent")}}</li>
 <li>{{domxref("TrackEvent")}}</li>
 <li>{{domxref("TransitionEvent")}}</li>
 <li>{{domxref("UIEvent")}}</li>
 <li>{{domxref("UserProximityEvent")}}</li>
 <li>{{domxref("WebGLContextEvent")}}</li>
 <li>{{domxref("WheelEvent")}}</li>
</ul>
</div>

<h2 id="构造器">构造器</h2>

<dl>
 <dt>{{domxref("Event.Event", "Event()")}}</dt>
 <dd>创建并返回一个 <code>Event</code> 对象。</dd>
</dl>

<h2 id="属性">属性</h2>

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

<dl>
 <dt>
 <h3 id="废弃属性">废弃属性</h3>
 </dt>
 <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
 <dd>已废弃，使用 {{domxref("Event.composed")}} 代替此属性。<br>
 一个{{jsxref("Boolean", "布尔值")}}，表示给定的事件是否会穿过 Shadow DOM，进入到标准 DOM 中。</dd>
</dl>

<h2 id="方法">方法</h2>

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

<h3 id="废弃方法">废弃方法</h3>

<dl>
 <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
 <dd>非标准方法；使用 {{domxref("Event.defaultPrevented")}} 属性代替此方法。<br>
 返回 {{domxref("Event.defaultPrevented")}} 的值。</dd>
 <dt>{{domxref("event.preventBubble")}} {{Obsolete_inline(24)}}</dt>
 <dd>已废弃；使用 {{domxref("event.stopPropagation")}} 代替此方法。<br>
 阻止事件继续冒泡。</dd>
 <dt>{{domxref("event.preventCapture")}} {{Obsolete_inline(24)}}</dt>
 <dd>已废弃；使用 {{domxref("event.stopPropagation")}} 代替此方法。</dd>
 <dt></dt>
</dl>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("api.Event")}}</p>

<h2 id="参考">参考</h2>

<ul>
 <li>可用的事件类型：<a href="/en-US/docs/Web/Reference/Events">Event 参考</a></li>
 <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Event 目标的比较</a>（目标 <code>target</code> vs 当前目标 <code>currentTarget</code> vs 相关目标 <code>relatedTarget</code> vs 初始目标 <code>originalTarget</code>）</li>
 <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">创建和触发自定义事件</a></li>
 <li>Firefox 拓展开发：
  <ul>
   <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">监听 FireFox 扩展中的事件</a></li>
   <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">监听所有标签页中的事件</a></li>
  </ul>
 </li>
</ul>