EventTarget - 事件对象接口

EventTarget 是一个由可以接收事件并可能有监听器的对象实现的接口。

Element，document 和 window 是最常见的事件目标，但其他对象也可以是事件目标，例如 XMLHttpRequest，AudioNode，AudioContext 等等。

许多事件目标（包括元素，文档和窗口）还支持通过 on... 属性来设置事件处理程序。

继承关系图

构造函数

EventTarget()

创建一个新的 EventTarget 对象实例。

方法

EventTarget.addEventListener()

在 EventTarget 上注册特定事件类型的事件处理程序。

EventTarget.removeEventListener()

从 EventTarget 中删除事件监听器。

EventTarget.dispatchEvent()

将一个事件分派给这个 EventTarget 。

Mozilla 和 Chrome 代码的其他方法

由 JS 代码实现的事件目标用于实现 on* 属性的 Mozilla 扩展。另请参阅WebIDL 绑定。

• void setEventHandler(DOMString type, EventHandler handler)
• EventHandler getEventHandler(DOMString type)

实例

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];

  for (var i = 0, l = stack.length; i < l; i++) {
    stack[i].call(this, event);
  }
  return !event.defaultPrevented;
};

规范

规范	状态	备注
DOM EventTarget 的定义	现行的标准	没有更改。
Document Object Model (DOM) Level 3 Events Specification EventTarget 的定义	已过时	一些参数现在是可选的（ listener ），或者接受 null 值（useCapture）。
Document Object Model (DOM) Level 2 Events Specification EventTarget 的定义	已过时	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. Window.EventTarget 在 Safari 10.1 之前的版本中不存在。

2. Window.EventTarget 在 Safari iOs 10.1 之前的版本中不存在。

3. 在 Chrome 49 之前，type 和 listener 参数是可选的。

4. 较早版本的 IE 通过等效的，专有的 EventTarget.attachEvent() 方法来支持。

5. 通过 attachEvent 支持。

6. 较早版本的 IE 通过等效的，专有的 EventTarget.fireEvent() 方法来支持。

7. 通过 fireEvent 支持。

相关链接

• 事件参考列表 - 平台中可用的事件列表。
• 事件开发者指南
• Event 接口