Event

由於本文件沒有此語言的翻譯版本,您閱讀的是英文版的內容。 幫助我們翻譯這篇文章!

Event 介面表示了一個在 DOM 物件上所發生的事件。

一個事件可以是由使用者的操作行為所產生(如:點擊滑鼠按鈕或敲打鍵盤),或是來自 API 因處理非同步任務所產生。事件也可以為程式所觸發,例如呼叫元素的 HTMLElement.click() 方法,或是自行定義事件並使用 EventTarget.dispatchEvent() 發送至特定的目標。

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

許多 DOM 元素可被設定接受(accept,或稱為 listen "監聽")這些事件,並在發生時執行處理(process、handle)事件的程式碼。事件處理器(Event-handlers)通常會使用 EventTarget.addEventListener() 來被連結(connected,或稱為 attached "附加")至各個 HTML 元素(例如 <button>、<div>、<div>、<span> 等),且此方式一般也是用來取代舊的 HTML 事件處理器屬性(attributes)。此外,在需要時也可以使用 removeEventListener() 來中斷事件處理器與元素的連結。請留意一個元素可以擁有多個事件處理器(即使是處理同一種事件的不同處理器),特別是那些被切分開來彼此獨立且有不同目標的程式模組(舉例來說,廣告及統計模組可以同時監控網頁中的影片觀看資訊)。

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 Event bubbling and capture settings of each handler triggered.

基於 Event 的子介面

Below is a list of interfaces which are based on the main Event interface, with links to their respective documentation in the MDN API reference. Note that all event interfaces have names which end in "Event".

建構式

Event()
建立一個 Event 物件。

屬性

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

Obsolete properties

Event.scoped Read only
A Boolean indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to composed.

方法

Event.createEvent() 

Creates a new event, which must then be initialized by calling its initEvent() method.

Event.composedPath()
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 ShadowRoot.mode closed.
Event.initEvent()
初始化已經建立的事件。若該事件已經被處理過,這方法就不會執行任何東西。
Event.preventDefault()
取消該事件(如果該事件的 cancelable 屬性為 true)。
Event.stopImmediatePropagation()
一旦事件物件呼叫此方法,目前元素中尚未執行的已註冊之相同事件類型監聽器將不會被呼叫,而事件也不會繼續捕捉或冒泡傳遞。
Event.stopPropagation()
阻止事件物件繼續捕捉或冒泡傳遞。

已廢棄方法

Event.getPreventDefault()
非標準方法。回傳 defaultPrevented 屬性值。請直接改用 defaultPrevented 屬性。
Event.preventBubble() 已過時 Gecko 24
已廢棄方法。阻止事件繼續冒泡傳遞。請改用 stopPropagation() 方法。
Event.preventCapture() 已過時 Gecko 24
已廢棄方法。請改用 stopPropagation() 方法。

規範

Specification Status Comment
DOM
The definition of 'Event' in that specification.
Living Standard  

瀏覽器相容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
EventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
Event() constructorChrome Full support 15Edge Full support YesFirefox Full support 11IE No support NoOpera Full support 11.6Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 14Opera Android Full support 12Safari iOS Full support 6Samsung Internet Android ?
bubblesChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
cancelableChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
cancelBubbleChrome Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Edge Full support 12Firefox Full support 53
Notes
Full support 53
Notes
Notes Prior to Firefox 53, this property was defined on the UIEvent interface. See bug 1298970 for more details.
IE Full support YesOpera Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Safari Full support YesWebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Firefox Android Full support 53
Notes
Full support 53
Notes
Notes Prior to Firefox 53, this property was defined on the UIEvent interface. See bug 1298970 for more details.
Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 58 and Opera 45, setting this property to false does nothing, as per spec discussion.
Safari iOS Full support YesSamsung Internet Android ?
composedChrome Full support 53Edge No support NoFirefox Full support 52IE No support NoOpera Full support 40Safari Full support YesWebView Android Full support 53Chrome Android Full support 53Firefox Android Full support 52Opera Android Full support 41Safari iOS Full support YesSamsung Internet Android ?
composedPathChrome Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Edge No support NoFirefox Full support 52IE No support NoOpera Full support 40
Full support 40
No support 37 — 40
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Safari Full support 10WebView Android Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Chrome Android Full support 53
Full support 53
No support 50 — 53
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Firefox Android Full support 52Opera Android Full support 41
Full support 41
No support 37 — 41
Alternate Name
Alternate Name Uses the non-standard name: deepPath
Safari iOS Full support 10Samsung Internet Android ?
createEventChrome No support NoEdge ? Firefox ? IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android ?
currentTargetChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 9
Full support 9
No support 6 — 9
Notes
Notes On Internet Explorer 6 through 8, the event model is different. Event listeners are attached with the non-standard EventTarget.attachEvent method. In this model, there is no equivalent to event.currentTarget and this is the global object. One solution to emulate the event.currentTarget feature is to wrap your handler in a function calling the handler using Function.prototype.call with the element as a first argument. This way, this will be the expected value.
Opera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 10Samsung Internet Android ?
defaultPreventedChrome Full support 18Edge Full support 12Firefox Full support 6IE Full support 9Opera Full support 11Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 5Samsung Internet Android ?
eventPhaseChrome Full support 45Edge Full support 12Firefox Full support YesIE Full support 9Opera Full support 32Safari Full support YesWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android Full support 32Safari iOS Full support YesSamsung Internet Android ?
explicitOriginalTarget
Non-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?
getPreventDefault
DeprecatedNon-standard
Chrome No support NoEdge ? Firefox No support ? — 59
Notes
No support ? — 59
Notes
Notes See bug 691151.
IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android No support ? — 59
Notes
No support ? — 59
Notes
Notes See bug 691151.
Opera Android No support NoSafari iOS ? Samsung Internet Android ?
initEvent
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support 17
Full support 17
No support ? — 17
Notes
Notes Before Firefox 17, a call to this method after the dispatching of the event raised an exception instead of doing nothing.
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 17
Full support 17
No support ? — 17
Notes
Notes Before Firefox 17, a call to this method after the dispatching of the event raised an exception instead of doing nothing.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
isTrustedChrome Full support 46
Notes
Full support 46
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Edge Full support 12Firefox Full support YesIE No support No
Notes
No support No
Notes
Notes In Internet Explorer, all events are trusted except those that are created with the createEvent() method.
Opera Full support 33
Notes
Full support 33
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Safari Full support 10WebView Android Full support 46
Notes
Full support 46
Notes
Notes Starting with version 53, untrusted events do not invoke the default action.
Chrome Android Full support 46
Notes
Full support 46
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Firefox Android Full support YesOpera Android Full support 33
Notes
Full support 33
Notes
Notes Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
Safari iOS Full support 10Samsung Internet Android ?
originalTarget
Non-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?
preventBubble
DeprecatedNon-standard
Chrome No support NoEdge ? Firefox No support ? — 24IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android No support ? — 24Opera Android No support NoSafari iOS ? Samsung Internet Android ?
preventCapture
DeprecatedNon-standard
Chrome No support NoEdge ? Firefox No support ? — 24IE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android No support ? — 24Opera Android No support NoSafari iOS ? Samsung Internet Android ?
preventDefaultChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
returnValue
Deprecated
Chrome Full support YesEdge Full support 12Firefox No support No
Notes
No support No
Notes
Notes Temporarily added in 63, removed in 64, briefly added in 65, then removed again while related compatibility issues are sorted out (see bug 1520756).
IE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android No support No
Notes
No support No
Notes
Notes Temporarily added in 63, removed in 64, briefly added in 65, then removed again while related compatibility issues are sorted out (see bug 1520756).
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
srcElement
Non-standard
Chrome Full support YesEdge Full support 12Firefox Full support 62IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 62Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
stopImmediatePropagationChrome Full support 6Edge Full support 12Firefox Full support 10IE Full support 9Opera Full support 15Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 10Opera Android Full support 14Safari iOS Full support 5Samsung Internet Android ?
stopPropagationChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
targetChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
timeStampChrome Full support 49
Notes
Full support 49
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Edge Full support 12Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
IE Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Opera Full support 36
Notes
Full support 36
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Safari Full support YesWebView Android Full support 49
Notes
Full support 49
Notes
Notes Starting with version 49, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Chrome Android Full support 49
Notes
Full support 49
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Firefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Opera Android Full support 36
Notes
Full support 36
Notes
Notes Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
Safari iOS Full support YesSamsung Internet Android ?
typeChrome Full support 45Edge Full support 12Firefox Full support YesIE ? Opera Full support 32Safari Full support YesWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android Full support 32Safari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

參見