EventTarget

翻譯不完整。 請幫助我們翻譯這篇文章！

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

除了最為常見的 Element、Document 與 Window 繼承或實作了 EventTarget 介面之外，其它的物件還有 XMLHttpRequest、AudioNode、AudioContext⋯等等。

許多 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)
  • EventHandler getEventHandler(DOMString type)

範例

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!

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.

參見