W3cubDocs

/DOM

EventTarget

EventTarget is an 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 on... properties and attributes.

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 for Mozilla chrome code

Mozilla extensions for use by JS-implemented event targets to implement on* 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 compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1	Yes	1	9	7	10.1 10.1 1 — 10.1 `Window.EventTarget` did not exist on versions of Safari before 10.1.
`EventTarget()` constructor	64	?	59	No	51	No
`addEventListener`	1 1 Before Chrome 49, the `type` and `listener` parameters were optional.	12	1	9 9 6 — 11 Older versions of IE supported an equivalent, proprietary `EventTarget.attachEvent()` method. Uses the non-standard name: `attachEvent`	7	1
`dispatchEvent`	4	12	2	9 9 6 — 11 Older versions of IE supported an equivalent, proprietary `EventTarget.fireEvent()` method. Uses the non-standard name: `fireEvent`	9	3.2
`removeEventListener`	1	12	1	9 9 6 — 11 Older versions of IE supported an equivalent, proprietary `EventTarget.detachEvent()` method. Uses the non-standard name: `detachEvent`	7	1

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	1	18	Yes	4	7	10.1 10.1 1 — 10.1 `Window.EventTarget` did not exist on versions of Safari iOS before 10.1.	Yes
`EventTarget()` constructor	64	64	?	59	51	No	No
`addEventListener`	1 1 Before Chrome 49, the `type` and `listener` parameters were optional.	18 18 Before Chrome 49, the `type` and `listener` parameters were optional.	Yes	4	7	1	Yes
`dispatchEvent`	4	18	Yes	4	Yes	Yes	Yes
`removeEventListener`	1	18	Yes	4	7	1	Yes