--- title: EventTarget slug: Web/API/EventTarget tags: - API - DOM - DOM Events - Interface translation_of: Web/API/EventTarget --- <p>{{ApiRef("DOM Events")}}</p> <p><code>EventTarget</code> 是一个 DOM 接口,由可以接收事件、并且可以创建侦听器的对象实现。</p> <p>{{domxref("Element")}},{{domxref("document")}} 和 {{domxref("window")}} 是最常见的 event targets ,但是其他对象也可以作为 event targets,比如 {{domxref("XMLHttpRequest")}},{{domxref("AudioNode")}},{{domxref("AudioContext")}} 等等。</p> <p>许多 event targets (包括 elements, documents 和 windows)支持通过 <code>onevent</code> 特性和属性设置<a href="/zh-CN/docs/Web/Guide/DOM/Events/Event_handlers">事件处理程序</a> (<a href="/zh-CN/docs/Web/Guide/DOM/Events/Event_handlers">event handlers</a>)。</p> <p>{{InheritanceDiagram}}</p> <h2 id="构造函数">构造函数</h2> <dl> <dt>{{domxref("EventTarget.EventTarget()","EventTarget()")}}</dt> <dd>创建一个新的 <code>EventTarget</code> 对象实例。</dd> </dl> <h2 id="Methods" name="Methods">方法</h2> <dl> <dt>{{domxref("EventTarget.addEventListener()")}}</dt> <dd>在EventTarget上注册特定事件类型的事件处理程序。</dd> <dt>{{domxref("EventTarget.removeEventListener()")}}</dt> <dd>EventTarget中删除事件侦听器。</dd> <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt> <dd>将事件分派到此EventTarget。</dd> </dl> <h3 id="Mozilla_chrome_代码的其他方法">Mozilla chrome 代码的其他方法</h3> <p>Mozilla扩展,供JS实现的事件目标使用以 实现 on* 属性。另见 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a> 绑定。</p> <ul> <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{non-standard_inline}}</li> <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{non-standard_inline}}</li> </ul> <h2 id="示例">示例</h2> <h3 id="EventTarget_的简单实现">EventTarget 的简单实现</h3> <pre class="brush: js">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); } }; </pre> <h2 id="Specification" name="Specification">规范</h2> <table class="standard-table"> <tbody> <tr> <th scope="col">规范</th> <th scope="col">状态</th> <th scope="col">注释</th> </tr> <tr> <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td> <td>{{Spec2('DOM WHATWG')}}</td> <td>No change.</td> </tr> <tr> <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td> <td>{{Spec2('DOM3 Events')}}</td> <td>A few parameters are now optional (<code>listener</code>), or accepts the <code>null</code> value (<code>useCapture</code>).</td> </tr> <tr> <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td> <td>{{Spec2('DOM2 Events')}}</td> <td>Initial definition.</td> </tr> </tbody> </table> <h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> <p>{{Compat("api.EventTarget")}}</p> <h2 id="相关链接">相关链接</h2> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events">Event reference</a> - the events available in the platform.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li> <li>{{domxref("Event")}} interface</li> </ul>