path: root/files/zh-tw/web/api/event/index.html

---
title: Event
slug: Web/API/Event
tags:
  - API
  - DOM
  - Event
  - Interface
  - NeedsTranslation
  - Reference
  - Référence(2)
  - TopicStub
translation_of: Web/API/Event
---
<p>{{APIRef("DOM")}}</p>

<p><code><strong>Event</strong></code> 介面表示了一個在 DOM 物件上所發生的事件。</p>

<p>一個事件可以是由使用者的操作行為所產生（如：點擊滑鼠按鈕或敲打鍵盤），或是來自 API 因處理非同步任務所產生。事件也可以為程式所觸發，例如呼叫元素的 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/HTMLElement/click" title="The HTMLElement.click() method simulates a mouse click on an element."><code>HTMLElement.click()</code></a> 方法，或是自行定義事件並使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent" title="Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent()."><code>EventTarget.dispatchEvent()</code></a> 發送至特定的目標。</p>

<p>事件有多種不同的類型，部分事件是使用基於 <code>Event</code> 的子介面。<code>Event</code> 本身包含了所有事件共同的屬性及方法。</p>

<p>許多 DOM 元素可被設定接受（accept，或稱為 listen "監聽"）這些事件，並在發生時執行處理（process、handle）事件的程式碼。事件處理器（Event-handlers）通常會使用 <code>EventTarget.addEventListener()</code> 來被連結（connected，或稱為 attached "附加"）至各個 <a href="https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element">HTML 元素</a>（例如 &lt;button&gt;、&lt;div&gt;、&lt;div&gt;、&lt;span&gt; 等），且此方式一般也是用來取代舊的 HTML <a href="https://developer.mozilla.org/zh-TW/docs/HTML/Global_attributes">事件處理器屬性（attributes）</a>。此外，在需要時也可以使用 <a href="https://developer.mozilla.org/zh-TW/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>

<p>When there are many nested elements, each with its own handler(s), event processing can become very complicated -- especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Event bubbling and capture</a> settings of each handler triggered.</p>

<h2 id="Introduction" name="Introduction">基於 <code>Event</code> 的子介面</h2>

<p>Below is a list of interfaces which are based on the main <code>Event</code> interface, with links to their respective documentation in the MDN API reference. Note that all event interfaces have names which end in "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="Constructor" name="Constructor">建構式</h2>

<dl>
 <dt>{{domxref("Event.Event", "Event()")}}</dt>
 <dd>建立一個 <code>Event</code> 物件。</dd>
</dl>

<h2 id="屬性" name="屬性">屬性</h2>

<dl>
 <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
 <dd>布林值，表示事件是否會向上冒泡傳遞。</dd>
 <dt>{{domxref("Event.cancelBubble")}}</dt>
 <dd>由於歷史性因素，此屬性的效果等同於 {{domxref("Event.stopPropagation()", "stopPropagation()")}} 方法。若在事件處理器回傳前設定此值為 <code>true</code>，可阻止事件繼續向上冒泡傳遞。</dd>
 <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
 <dd>布林值，表示事件是否能被取消。</dd>
 <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
 <dd>A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.</dd>
 <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
 <dd>指向目前處理事件之監聽器所屬的 DOM 物件。</dd>
 <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
 <dd>An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.</dd>
 <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
 <dd>布林值，表示事件的預設行為是否被 {{domxref("event.preventDefault()", "preventDefault()")}} 方法所取消。</dd>
 <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
 <dd>表示事件目前的傳遞階段。</dd>
 <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
 <dd>事件的明確原定目標（Mozilla 專屬）。</dd>
 <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
 <dd>事件重新導向前的原定目標（Mozilla 專屬）。</dd>
 <dt>{{domxref("Event.returnValue")}}</dt>
 <dd>非標準屬性。用以替代 {{domxref("Event.preventDefault()", "preventDefault()")}} 方法與 {{domxref("Event.defaultPrevented", "defaultPrevented")}} 屬性（舊版 Internet Explorer 專屬）。</dd>
 <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
 <dd>A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.</dd>
 <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt>
 <dd>非標準屬性。為 {{domxref("Event.target", "target")}} 屬性的別名（舊版 Internet Explorer 專屬）。</dd>
 <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
 <dd>指向最初觸發事件的 DOM 物件。</dd>
 <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
 <dd>事件發生（事件物件建立）至今的時間。</dd>
 <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
 <dd>事件類型（不區分大小寫）。</dd>
 <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
 <dd>表示事件物件是否為瀏覽器建立（比如在用戶點擊之後），或由程式碼所建立（使用建立事件的方法，如 {{domxref("Event.initEvent()", "initEvent()")}}）。</dd>
</dl>

<h3 id="Obsolete_properties">Obsolete properties</h3>

<dl>
 <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
 <dd>A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.</dd>
</dl>

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

<dl>
 <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt>
 <dd>
 <p>Creates a new event, which must then be initialized by calling its <code>initEvent()</code> method.</p>
 </dd>
 <dt>{{domxref("Event.composedPath()")}}</dt>
 <dd>Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its {{domxref("ShadowRoot.mode")}} closed.</dd>
</dl>

<dl>
 <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
 <dd>初始化已經建立的事件。若該事件已經被處理過，這方法就不會執行任何東西。</dd>
 <dt>{{domxref("Event.preventDefault()")}}</dt>
 <dd>取消該事件（如果該事件的 {{domxref("Event.cancelable", "cancelable")}} 屬性為 <code>true</code>）。</dd>
 <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
 <dd>一旦事件物件呼叫此方法，目前元素中尚未執行的已註冊之相同事件類型監聽器將不會被呼叫，而事件也不會繼續捕捉或冒泡傳遞。</dd>
 <dt>{{domxref("Event.stopPropagation()")}}</dt>
 <dd>阻止事件物件繼續捕捉或冒泡傳遞。</dd>
</dl>

<h3 id="已廢棄方法">已廢棄方法</h3>

<dl>
 <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
 <dd>非標準方法。回傳 <code>defaultPrevented</code> 屬性值。請直接改用 {{domxref("Event.defaultPrevented", "defaultPrevented")}} 屬性。</dd>
 <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
 <dd>已廢棄方法。阻止事件繼續冒泡傳遞。請改用 {{domxref("event.stopPropagation()", "stopPropagation()")}} 方法。</dd>
 <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
 <dd>已廢棄方法。請改用 {{domxref("event.stopPropagation()", "stopPropagation()")}} 方法。</dd>
</dl>

<h2 id="規範">規範</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</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="See_also" name="See_also">參見</h2>

<ul>
 <li>可用的事件類型：<a href="/zh-TW/docs/Web/Reference/Events">Event reference</a></li>
 <li><a href="/zh-TW/docs/Web/API/Event/Comparison_of_Event_Targets">各種 Event Targets 的比較</a> (target vs currentTarget vs relatedTarget vs originalTarget)</li>
 <li><a href="/zh-TW/docs/Web/Guide/Events/Creating_and_triggering_events">建立和觸發事件</a></li>
 <li>給 Firefox 插件開發者：
  <ul>
   <li><a href="/zh-TW/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li>
   <li><a href="/zh-TW/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li>
  </ul>
 </li>
</ul>