EventTarget是一个由可以接收事件的对象实现的接口,并且可以为它们创建侦听器。

Elementdocumentwindow 是最常见的事件目标,但是其他对象也可以是事件目标,比如XMLHttpRequestAudioNodeAudioContext 等等。

许多事件目标(包括元素,文档和 window)还支持通过 on... 属性和属性设置事件处理程序

构造函数

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

方法

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

Mozilla chrome 代码的其他方法

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

  • 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 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);
  }
};

规范

规范 状态 注释
DOM
EventTarget
Living Standard No change.
Document Object Model (DOM) Level 3 Events Specification
EventTarget
Obsolete A few parameters are now optional (listener), or accepts the null value (useCapture).
Document Object Model (DOM) Level 2 Events Specification
EventTarget
Obsolete Initial definition.

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes197

10.1

1 — 10.11

EventTarget() constructor64 ?59 No51 No
addEventListener13121

9

6 — 114 5

71
dispatchEvent4122

9

6 — 116 7

93.2
removeEventListener1121

9

6 — 118 9

71
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support118 Yes47

10.1

1 — 10.12

Yes
EventTarget() constructor6464 ?5951 No No
addEventListener13183 Yes471 Yes
dispatchEvent418 Yes4 Yes Yes Yes
removeEventListener118 Yes471 Yes

1. Window.EventTarget did not exist on versions of Safari before 10.1.

2. Window.EventTarget did not exist on versions of Safari iOS before 10.1.

3. Before Chrome 49, the type and listener parameters were optional.

4. Older versions of IE supported an equivalent, proprietary EventTarget.attachEvent() method.

5. Supported as attachEvent.

6. Older versions of IE supported an equivalent, proprietary EventTarget.fireEvent() method.

7. Supported as fireEvent.

8. Older versions of IE supported an equivalent, proprietary EventTarget.detachEvent() method.

9. Supported as detachEvent.

相关链接

文档标签和贡献者

标签: 
此页面的贡献者: zhangchen, Ende93, xgqfrms-GitHub, khalid32, ziyunfei
最后编辑者: zhangchen,