EventTarget

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

EventTarget 介面定義了其實作的物件具有接收事件的能力,也可能擁有處理事件的監聽器。

除了最為常見的 ElementDocumentWindow 繼承或實作了 EventTarget 介面之外,其它的物件還有 XMLHttpRequestAudioNodeAudioContext⋯ 等等。

許多 EventTarget(包括 Element、Document 和 Window)除了透過 addEventListener() 方法外,還可藉由 DOM 物件的屬性(property)或 HTML 元素屬性(attribute)來設定事件處理器

方法

EventTarget.addEventListener()

EventTarget 物件上註冊指定事件的監聽器。

EventTarget.removeEventListener()

移除 EventTarget 物件上的指定事件監聽器。

EventTarget.dispatchEvent()

對此 EventTarget 物件派送(dispatch)一個事件物件,也就是於此 EventTarget 物件上觸發一個指定的事件物件實體。

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) Non-standard
  • EventHandler getEventHandler(DOMString type) Non-standard

範例

Simple implementation of EventTarget

js
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];
  event.target = this;
  for (var i = 0, l = stack.length; i < l; i++) {
    stack[i].call(this, event);
  }
  return !event.defaultPrevented;
};

規範

Specification
DOM
# interface-eventtarget

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
EventTarget
EventTarget() constructor
addEventListener
Form with options object supported (third parameter can be either options or a Boolean, for backwards compatibility)
options.capture parameter
options.once parameter
options.passive parameter
options.passive parameter defaults to true for touchstart and touchmove events
options.passive parameter defaults to true for wheel and mousewheel events
options.signal parameter
useCapture parameter is optional
dispatchEvent
removeEventListener
Form with options object supported (third parameter can be either options or a Boolean, for backwards compatibility)
useCapture parameter is optional

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Has more compatibility info.

參見