EventTarget

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

除了最為常見的 ElementDocument 與 Window 繼承或實作了 EventTarget 介面之外,其它的物件還有 XMLHttpRequestAudioNode (en-US)AudioContext (en-US)⋯等等。

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

方法

EventTarget.addEventListener() (en-US)
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) This API has not been standardized.
  • EventHandler getEventHandler(DOMString type) This API has not been standardized.

範例

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

規範

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.

瀏覽器相容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 9.0 7 1.0[1]
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 (Yes) 1.0 (1) 9.0 6.0 1.0

[1] window.EventTarget does not exist.

參見