--- title: EventTarget slug: Web/API/EventTarget tags: - API - DOM - DOM Events - Interface translation_of: Web/API/EventTarget ---

{{ApiRef("DOM Events")}}

EventTarget 是一个 DOM 接口，由可以接收事件、并且可以创建侦听器的对象实现。

{{domxref("Element")}}，{{domxref("document")}} 和 {{domxref("window")}} 是最常见的 event targets ，但是其他对象也可以作为 event targets，比如 {{domxref("XMLHttpRequest")}}，{{domxref("AudioNode")}}，{{domxref("AudioContext")}}  等等。

许多 event targets （包括 elements， documents 和 windows）支持通过 onevent 特性和属性设置事件处理程序 (event handlers)。

{{InheritanceDiagram}}

构造函数

{{domxref("EventTarget.EventTarget()","EventTarget()")}}
创建一个新的 EventTarget 对象实例。

方法

{{domxref("EventTarget.addEventListener()")}}
在EventTarget上注册特定事件类型的事件处理程序。
{{domxref("EventTarget.removeEventListener()")}}
EventTarget中删除事件侦听器。
{{domxref("EventTarget.dispatchEvent()")}}
将事件分派到此EventTarget。

Mozilla chrome 代码的其他方法

Mozilla扩展，供JS实现的事件目标使用以 实现 on* 属性。另见 WebIDL bindings 绑定。

示例

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 this.removeEventListener(type, callback);
    }
  }
};

EventTarget.prototype.dispatchEvent = function(event) {
  if(!(event.type in this.listeners)) {
    return;
  }
  var stack = this.listeners[event.type];
  event.target = this;
  for(var i = 0, l = stack.length; i < l; i++) {
      stack[i].call(this, event);
  }
};

规范

规范 状态 注释
{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}} {{Spec2('DOM WHATWG')}} No change.
{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}} {{Spec2('DOM3 Events')}} A few parameters are now optional (listener), or accepts the null value (useCapture).
{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}} {{Spec2('DOM2 Events')}} Initial definition.

浏览器兼容性

{{Compat("api.EventTarget")}}

相关链接