EventTarget
is a DOM interface implemented by objects that can receive events and may have listeners for them.
Element
, Document
, and Window
are the most common event targets, but other objects can be event targets, too. For example XMLHttpRequest
, AudioNode
, AudioContext
, and others.
Many event targets (including elements, documents, and windows) also support setting event handlers via onevent
properties and attributes.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Constructor
EventTarget()
- Creates a new
EventTarget
object instance.
Methods
EventTarget.addEventListener()
- Registers an event handler of a specific event type on the
EventTarget
. EventTarget.removeEventListener()
- Removes an event listener from the
EventTarget
. EventTarget.dispatchEvent()
- Dispatches an event to this
EventTarget
.
Additional methods in Mozilla chrome codebase
Mozilla includes a couple of extensions for use by JS-implemented event targets to implement onevent
properties.
See also WebIDL bindings.
void setEventHandler(DOMString type, EventHandler handler)
EventHandler getEventHandler(DOMString type)
Example
Simple implementation of EventTarget
var EventTarget = function() { this.listeners = {}; }; EventTarget.prototype.listeners = null; EventTarget.prototype.addEventListener = function(type, callback) { if (!(type in this.listeners)) { this.listeners[type] = []; } this.listeners[type].push(callback); }; EventTarget.prototype.removeEventListener = function(type, callback) { if (!(type in this.listeners)) { return; } var stack = this.listeners[type]; for (var i = 0, l = stack.length; i < l; i++) { if (stack[i] === callback){ stack.splice(i, 1); return; } } }; EventTarget.prototype.dispatchEvent = function(event) { if (!(event.type in this.listeners)) { return true; } var stack = this.listeners[event.type].slice(); for (var i = 0, l = stack.length; i < l; i++) { stack[i].call(this, event); } return !event.defaultPrevented; };
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'EventTarget' in that specification. |
Living Standard | No change. |
Document Object Model (DOM) Level 3 Events Specification The definition of 'EventTarget' in that specification. |
Obsolete | A few parameters are now optional (listener ), or accepts the null value (useCapture ). |
Document Object Model (DOM) Level 2 Events Specification The definition of 'EventTarget' in that specification. |
Obsolete | Initial definition. |
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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
EventTarget | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 6 | 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 |
EventTarget() constructor | Chrome Full support 64 | Edge Full support ≤79 | Firefox Full support 59 | IE No support No | Opera Full support 51 | Safari No support No | WebView Android Full support 64 | Chrome Android Full support 64 | Firefox Android Full support 59 | Opera Android Full support 47 | Safari iOS No support No | Samsung Internet Android Full support 9.0 |
addEventListener | 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
|
dispatchEvent | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 2 | IE
Full support
9
| Opera Full support 9 | Safari Full support 3.2 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
removeEventListener | 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
- See implementation notes.
- See implementation notes.
- Uses a non-standard name.
- Uses a non-standard name.
See also
- Event reference - the events available in the platform.
- Event developer guide
Event
interface