Web/API/Event

The Event interface represents an event which takes place in the DOM.

An event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by APIs to represent the progress of an asynchronous task. It can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent().

There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.

Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various HTML elements (such as <button>, <div>, <span>, etc.) using EventTarget.addEventListener(), and this generally replaces using the old HTML event handler attributes. Further, when properly added, such handlers can also be disconnected if needed using removeEventListener().

Note: One element can have several such handlers, even for the exact same event—particularly if separate, independent code modules attach them, each for its own independent purposes. (For example, a webpage with an advertising-module and statistics-module both monitoring video-watching.)

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 [[../../../Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture|Event bubbling and capture]] settings of each handler triggered.

Interfaces based on 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".

• AnimationEvent
• AudioProcessingEvent
• BeforeInputEvent
• BeforeUnloadEvent
• BlobEvent
• ClipboardEvent
• CloseEvent
• CompositionEvent
• CSSFontFaceLoadEvent
• CustomEvent
• DeviceLightEvent
• DeviceMotionEvent
• DeviceOrientationEvent
• DeviceProximityEvent
• DOMTransactionEvent
• DragEvent
• EditingBeforeInputEvent
• ErrorEvent
• FetchEvent
• FocusEvent
• GamepadEvent
• HashChangeEvent
• IDBVersionChangeEvent
• InputEvent
• KeyboardEvent
• MediaStreamEvent
• MessageEvent
• MouseEvent
• MutationEvent
• OfflineAudioCompletionEvent
• OverconstrainedError
• PageTransitionEvent
• PaymentRequestUpdateEvent
• PointerEvent
• PopStateEvent
• ProgressEvent
• RelatedEvent
• RTCDataChannelEvent
• RTCIdentityErrorEvent
• RTCIdentityEvent
• RTCPeerConnectionIceEvent
• SensorEvent
• StorageEvent
• SVGEvent
• SVGZoomEvent
• TimeEvent
• TouchEvent
• TrackEvent
• TransitionEvent
• UIEvent
• UserProximityEvent
• WebGLContextEvent
• WheelEvent

Constructor

Event()

Creates an Event object, returning it to the caller.

Properties

Event.bubbles Read only

A boolean indicating whether or not the event bubbles up through the DOM.

Event.cancelBubble

A historical alias to Event.stopPropagation(). Setting its value to true before returning from an event handler prevents propagation of the event.

Event.cancelable Read only

A boolean indicating whether the event is cancelable.

Event.composed Read only

A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.

Event.currentTarget Read only

A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.

Event.deepPath '

An Array of DOM Nodes through which the event has bubbled.

Event.defaultPrevented Read only

Indicates whether or not the call to event.preventDefault() canceled the event.

Event.eventPhase Read only

Indicates which phase of the event flow is being processed.

Event.explicitOriginalTarget ' Read only

The explicit original target of the event (Mozilla-specific.)

Event.originalTarget ' Read only

The original target of the event, before any retargetings. (Mozilla-specific.)

Event.returnValue

A historical property introduced by Internet Explorer and eventually adopted into the DOM specification in order to ensure existing sites continue to work. Ideally, you should try to use Event.preventDefault() and Event.defaultPrevented instead, but you can use returnValue if you choose to do so.

Event.srcElement '

A non-standard alias (from old versions of Microsoft Internet Explorer) for Event.target. Some other browsers are starting to support it for web compatibility purposes.

Event.target Read only

A reference to the target to which the event was originally dispatched.

Event.timeStamp Read only

The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.

Event.type Read only

The name of the event. Case-insensitive.

Event.isTrusted Read only

Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, like Event.initEvent).

Deprecated properties

Event.scoped Read only '

A Boolean indicating whether the given event will bubble across through the shadow root into the standard DOM. Use composed instead.

Methods

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.preventDefault()

Cancels the event (if it is cancelable).

Event.stopImmediatePropagation()

For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).

Event.stopPropagation()

Stops the propagation of events further along in the DOM.

Deprecated methods

Event.createEvent() '

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

Event.initEvent() '

Initializes the value of an Event created. If the event has already been dispatched, this method does nothing.

Event.getPreventDefault() ' '

Returns the value of Event.defaultPrevented.

Event.preventBubble() ' '

Prevents the event from bubbling. Use event.stopPropagation instead.

Event.preventCapture() ' '

Prevents the event from bubbling. Use event.stopPropagation instead.

Specifications

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

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Event	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 6	Opera Full support 4	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
Event() constructor	Chrome Full support 15	Edge Full support 12	Firefox Full support 11	IE No support No	Opera Full support 11.6	Safari Full support 6	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 14	Opera Android Full support 12	Safari iOS Full support 6	Samsung Internet Android Full support 1.0
bubbles	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE ?	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
cancelable	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE ?	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
cancelBubble	Chrome 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 12	Firefox 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 Yes	Opera 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 Yes	WebView 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 Yes	Samsung Internet Android Full support Yes Notes' Full support Yes Notes' Notes' Starting with Samsung Internet 7.0 and Opera 45, setting this property to false does nothing, as per spec discussion.
composed	Chrome Full support 53	Edge Full support 79	Firefox Full support 52	IE No support No	Opera Full support 40	Safari Full support Yes	WebView Android Full support 53	Chrome Android Full support 53	Firefox Android Full support 52	Opera Android Full support 41	Safari iOS Full support Yes	Samsung Internet Android Full support 6.0
composedPath	Chrome Full support 53 Full support 53 No support 50 — 53 Alternate Name' Alternate Name' Uses the non-standard name: deepPath	Edge Full support 79	Firefox Full support 52	IE No support No	Opera Full support 40 Full support 40 No support 37 — 40 Alternate Name' Alternate Name' Uses the non-standard name: deepPath	Safari Full support 10	WebView 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 52	Opera 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 10	Samsung Internet Android Full support 6.0 Full support 6.0 No support 5.0 — 6.0 Alternate Name' Alternate Name' Uses the non-standard name: deepPath
currentTarget	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE 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 7	Safari Full support 10	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 10	Samsung Internet Android Full support 1.0
defaultPrevented	Chrome Full support 18	Edge Full support 12	Firefox Full support 6	IE Full support 9	Opera Full support 11	Safari Full support 5	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support 6	Opera Android Full support 11	Safari iOS Full support 5	Samsung Internet Android Full support 1.0
eventPhase	Chrome Full support 45	Edge Full support 12	Firefox Full support Yes	IE Full support 9	Opera Full support 32	Safari Full support Yes	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support Yes	Opera Android Full support 32	Safari iOS Full support Yes	Samsung Internet Android Full support 5.0
explicitOriginalTarget Non-standard'	Chrome No support No	Edge No support No	Firefox Full support Yes	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support Yes	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
getPreventDefault Deprecated'Non-standard'	Chrome No support No	Edge No support No	Firefox No support ? — 59 Notes' No support ? — 59 Notes' Notes' See bug 691151.	IE No support No	Opera No support No	Safari ?	WebView Android No support No	Chrome Android No support No	Firefox Android No support ? — 59 Notes' No support ? — 59 Notes' Notes' See bug 691151.	Opera Android No support No	Safari iOS ?	Samsung Internet Android No support No
initEvent Deprecated'	Chrome Full support Yes	Edge Full support 12	Firefox 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 Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox 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 Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
isTrusted	Chrome 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 12	Firefox Full support Yes	IE 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 10	WebView 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 Yes	Opera 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 10	Samsung Internet Android Full support 5.0 Notes' Full support 5.0 Notes' Notes' Starting with Samsung Internet 6.0 and Opera 40, untrusted events do not invoke the default action.
originalTarget Non-standard'	Chrome No support No	Edge No support No	Firefox Full support Yes	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support Yes	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
preventBubble Deprecated'Non-standard'	Chrome No support No	Edge No support No	Firefox No support ? — 24	IE No support No	Opera No support No	Safari ?	WebView Android No support No	Chrome Android No support No	Firefox Android No support ? — 24	Opera Android No support No	Safari iOS ?	Samsung Internet Android No support No
preventCapture Deprecated'Non-standard'	Chrome No support No	Edge No support No	Firefox No support ? — 24	IE No support No	Opera No support No	Safari ?	WebView Android No support No	Chrome Android No support No	Firefox Android No support ? — 24	Opera Android No support No	Safari iOS ?	Samsung Internet Android No support No
preventDefault	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support 7	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
returnValue Deprecated'	Chrome Full support Yes	Edge Full support 12	Firefox 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 6	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox 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 Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
srcElement Deprecated'	Chrome Full support Yes	Edge Full support 12	Firefox Full support 62	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 62	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
stopImmediatePropagation	Chrome Full support 6	Edge Full support 12	Firefox Full support 10	IE Full support 9	Opera Full support 15	Safari Full support 5	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 10	Opera Android Full support 14	Safari iOS Full support 5	Samsung Internet Android Full support 1.0
stopPropagation	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support 7	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
target	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support 7	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
timeStamp	Chrome 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 12	Firefox 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 Yes	WebView 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 Yes	Samsung Internet Android Full support 5.0 Notes' Full support 5.0 Notes' Notes' Starting with Samsung Internet 5.0, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.
type	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support 7	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

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.

See also

• Types of events available: Event reference
• Comparison of Event Targets (target vs currentTarget vs relatedTarget vs originalTarget)
• Creating and triggering custom events

Event by Mozilla Contributors is licensed under CC-BY-SA 2.5.