EventTarget | Web API

在此页

构造函数
方法
范例
规范
浏览器兼容性
另请参阅
相关话题

EventTarget 是由可以接收事件且可以为事件提供监听器的对象实现的 DOM 接口。

元素 , Document ，和 Window 是最常见的事件目标，但其它对象也可以是事件目标。例如 XMLHttpRequest , AudioNode , AudioContext ，等。

很多事件目标 (包括元素、文档及窗口) 还支持设置事件处理程序凭借 on event 特性和属性。

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/EventTarget.html" target="_top"><rect x="1" y="1" width="110" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

构造函数

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

方法

EventTarget .addEventListener(): 注册特定事件类型的事件处理程序在 EventTarget .
EventTarget .removeEventListener(): 移除事件监听器从 EventTarget .
EventTarget .dispatchEvent(): 把事件分派给此 EventTarget .

额外 Mozilla Chrome 代码库方法

Mozilla 包括 2 个扩展，供由 JS 实现的事件目标用于实现 on event 特性。

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

规范

规范	状态	注释
DOM 在该规范中的 EventTarget 定义。	实时标准	无变化。
DOM (文档对象模型) 3 级事件规范在该规范中的 EventTarget 定义。	过时	一些参数现在是可选的 ( `listener` )，或接受 `null` 值 ( `useCapture` ).
DOM (文档对象模型) 2 级事件规范在该规范中的 EventTarget 定义。	过时	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`EventTarget`	Chrome 1	Edge 12	Firefox 1	IE 6	Opera 7	Safari 1 注意事项 1 注意事项 `window.EventTarget` did not exist on versions of Safari before 10.1.	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1 注意事项 1 注意事项 `window.EventTarget` did not exist on versions of Safari iOS before 10.3.	Samsung Internet Android 1.0
`EventTarget()` 构造函数	Chrome 64	Edge ≤79	Firefox 59	IE 不支持 No	Opera 51	Safari 不支持 No	WebView Android 64	Chrome Android 64	Firefox Android 59	Opera Android 47	Safari iOS 不支持 No	Samsung Internet Android 9.0
`addEventListener`	Chrome 1 注意事项 1 注意事项 Before Chrome 49, the `type` and `listener` parameters were optional.	Edge 12	Firefox 1	IE 9 9 6 — 11 注意事项 Alternate Name Older versions of IE supported an equivalent, proprietary `EventTarget.attachEvent()` 方法。 Alternate Name Uses the non-standard name: `attachEvent`	Opera 7	Safari 1	WebView Android 1 注意事项 1 注意事项 Before Chrome 49, the `type` and `listener` parameters were optional.	Chrome Android 18 注意事项 18 注意事项 Before Chrome 49, the `type` and `listener` parameters were optional.	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0 注意事项 1.0 注意事项 Before Samsung Internet 5.0, the `type` and `listener` parameters were optional.
`dispatchEvent`	Chrome 4	Edge 12	Firefox 2	IE 9 9 6 — 11 注意事项 Alternate Name Older versions of IE supported an equivalent, proprietary `EventTarget.fireEvent()` 方法。 Alternate Name Uses the non-standard name: `fireEvent`	Opera 9	Safari 3.2	WebView Android 4	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 3	Samsung Internet Android 1.0
`removeEventListener`	Chrome 1	Edge 12	Firefox 1	IE 9 9 6 — 11 注意事项 Alternate Name Older versions of IE supported an equivalent, proprietary `EventTarget.detachEvent()` 方法。 Alternate Name Uses the non-standard name: `detachEvent`	Opera 7	Safari 1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0

图例

完整支持
不支持

使用非标名称。

另请参阅

事件参考 - 平台中可用的事件。
事件开发者指南
事件 interface

元数据

最后修改： Feb 25, 2020

在此页

构造函数

方法

额外 Mozilla Chrome 代码库方法

范例

EventTarget 的简单实现

规范

浏览器兼容性

图例

另请参阅

相关话题