Events
The CustomEvent interface can be used to attach custom data to an event generated by an application.
As an alternative to CustomEvent, you can subclass the Event interface to add custom data and behavior.
Event CustomEvent
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 6 | 5 | 18 | 5 | |
| The CustomEvent() constructor creates a new CustomEvent object. | 15 | 12 | 11 | 6 | 18 | 6 |
| The read-only detail property of the CustomEvent interface returns any data passed when initializing the event. | 5 | 12 | 6 | 5 | 18 | 5 |
worker_support Available in workers | 43 | 17 | 48 | 12 | 43 | 12 |
| The Event interface represents an event which takes place on an EventTarget. | 1 | 12 | 1 | 1 | 18 | 1 |
| The bubbles read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not. | 1 | 12 | 1.5 | 1 | 18 | 1 |
| The cancelable read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened. | 1 | 12 | 1.5 | 1 | 18 | 1 |
| The currentTarget read-only property of the Event interface identifies the element to which the event handler has been attached. | 1 | 12 | 1 | 1 | 18 | 1 |
| The defaultPrevented read-only property of the Event interface returns a boolean value indicating whether or not the call to canceled the event. | 5 | 12 | 6 | 5 | 18 | 5 |
| The Event() constructor creates a new Event object. An event created in this way is called a synthetic event, as opposed to an event fired by the browser, and can be dispatched by a script. | 15 | 12 | 11 | 6 | 18 | 6 |
| The eventPhase read-only property of the Event interface indicates which phase of the event flow is currently being evaluated. | 1 | 12 | 1.5 | 1 | 18 | 1 |
| The isTrusted read-only property of the Event interface is a boolean value that is true when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and false when the event was dispatched via EventTarget.dispatchEvent(). The click event fired through HTMLElement.click() sets the isTrusted… | 46 | 12 | 1.5 | 10 | 46 | 10 |
| The preventDefault() method of the Event interface tells the user agent that the event is being explicitly handled, so its default action, such as page scrolling, link navigation, or pasting text, should not be taken. | 1 | 12 | 1 | 1 | 18 | 1 |
| The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called. | 5 | 12 | 10 | 5 | 18 | 5 |
| The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the Event.preventDefault method. It also does not prevent… | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only target property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event handler is called during the bubbling or capturing phase of the event. | 1 | 12 | 1 | 1 | 18 | 1 |
| The timeStamp read-only property of the Event interface returns the time (in milliseconds) at which the event was created. | 1 | 12 | 1.5 | 1 | 18 | 1 |
| The type read-only property of the Event interface returns a string containing the event's type. It is set when the event is constructed and is the name commonly used to refer to the specific event, such as click, load, or error. | 1 | 12 | 1.5 | 1 | 18 | 1 |
| The EventTarget interface is implemented by objects that can receive events and may have listeners for them. In other words, any target of events implements the three methods associated with this interface. | 1 | 12 | 1 | 1 | 18 | 1 |
| The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target. | 1 | 12 | 1 | 1 | 18 | 1 |
addEventListener (options parameter) Form with `options` object supported (third parameter can be either options or a `Boolean`, for backwards compatibility) | 49 | 16 | 49 | 10 | 49 | 10 |
addEventListener (options parameter options capture parameter) `options.capture` parameter | 49 | 16 | 49 | 10 | 49 | 10 |
addEventListener (options parameter options once parameter) `options.once` parameter | 55 | 16 | 50 | 10 | 55 | 10 |
addEventListener (options parameter options passive parameter) `options.passive` parameter | 51 | 16 | 49 | 10 | 51 | 10 |
addEventListener (options parameter options passive parameter default true touch) `options.passive` parameter defaults to `true` for `touchstart` and `touchmove` events | 55 | 79 | 61 | 11.1 | 55 | 11.3 |
addEventListener (options parameter options passive parameter default true wheel) `options.passive` parameter defaults to `true` for `wheel` and `mousewheel` events | 73 | 79 | 84 | | 73 | |
addEventListener (options parameter options signal parameter) `options.signal` parameter | 90 | 90 | 86 | 15 | 90 | 15 |
addEventListener (useCapture parameter optional) `useCapture` parameter is optional | 1 | 12 | 6 | 1 | 18 | 1 |
| The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent(). | 4 | 12 | 2 | 3.1 | 18 | 3 |
| The EventTarget() constructor creates a new EventTarget object instance. | 64 | 79 | 59 | 14 | 64 | 14 |
| The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. 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… | 1 | 12 | 1 | 1 | 18 | 1 |
removeEventListener (options parameter) Form with `options` object supported (third parameter can be either options or a `Boolean`, for backwards compatibility) | 49 | 16 | 49 | 10 | 49 | 10 |
removeEventListener (useCapture parameter optional) `useCapture` parameter is optional | 1 | 12 | 6 | 1 | 18 | 1 |
- Starting with Chrome 53 and Opera 40, untrusted events do not invoke the default action.
- Starting with Chrome Android 53 and Opera 40, untrusted events do not invoke the default action.
- Starting with Chrome 49, Firefox 54 and Opera 36, this property returns `DOMHighResTimeStamp` instead of `DOMTimeStamp`.
- Starting with Chrome 49, Firefox 54 and Opera 36, this property returns `DOMHighResTimeStamp` instead of `DOMTimeStamp`.
- Starting with Chrome Android 49, Firefox 54 and Opera 36, this property returns `DOMHighResTimeStamp` instead of `DOMTimeStamp`.
- `window.EventTarget` did not exist on versions of Safari before 10.1.
- `window.EventTarget` did not exist on versions of Safari iOS before 10.3.
- Before Chrome 49, the `type` and `listener` parameters were optional.
- Before Chrome Android 49, the `type` and `listener` parameters were optional.
Use cases
-
Using Events
The CustomEvent interface can be used to attach custom data to an event generated by an application.
Cautions
- May not be supported in older browsers.
Implementation notes
- Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.