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 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 totrue
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 DOMNode
s 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()
andEvent.defaultPrevented
instead, but you can usereturnValue
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. Usecomposed
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 |
---|---|---|
DOM The definition of 'Event' in that specification. |
Living Standard |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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
| Edge Full support 12 | Firefox
Full support
53
| 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
53
| Opera Android
Full support
Yes
| Safari iOS Full support Yes | Samsung Internet Android
Full support
Yes
|
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
| Edge Full support 79 | Firefox Full support 52 | IE No support No | Opera
Full support
40
| Safari Full support 10 | WebView Android
Full support
53
| Chrome Android
Full support
53
| Firefox Android Full support 52 | Opera Android
Full support
41
| Safari iOS Full support 10 | Samsung Internet Android
Full support
6.0
|
currentTarget | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE
Full support
9
| 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 | 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 | Chrome No support No | Edge No support No | Firefox
No support
? — 59
| IE ? | Opera No support No | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android
No support
? — 59
| Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
initEvent | Chrome Full support Yes | Edge Full support 12 | Firefox
Full support
17
| 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
| Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
isTrusted | Chrome
Full support
46
| Edge Full support 12 | Firefox Full support Yes | IE
No support
No
| Opera
Full support
33
| Safari Full support 10 | WebView Android
Full support
46
| Chrome Android
Full support
46
| Firefox Android Full support Yes | Opera Android
Full support
33
| Safari iOS Full support 10 | Samsung Internet Android
Full support
5.0
|
originalTarget | 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 | Chrome No support No | Edge No support No | Firefox No support ? — 24 | IE ? | 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 | Chrome No support No | Edge No support No | Firefox No support ? — 24 | IE ? | 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 | Chrome Full support Yes | Edge Full support 12 | Firefox
No support
No
| 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
| Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
srcElement | 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
| Edge Full support 12 | Firefox
Full support
Yes
| IE
Full support
Yes
| Opera
Full support
36
| Safari Full support Yes | WebView Android
Full support
49
| Chrome Android
Full support
49
| Firefox Android
Full support
Yes
| Opera Android
Full support
36
| Safari iOS Full support Yes | Samsung Internet Android
Full support
5.0
|
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
vscurrentTarget
vsrelatedTarget
vsoriginalTarget
) - Creating and triggering custom events