diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/eventtarget/index.html | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/eventtarget/index.html')
-rw-r--r-- | files/zh-cn/web/api/eventtarget/index.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/eventtarget/index.html b/files/zh-cn/web/api/eventtarget/index.html new file mode 100644 index 0000000000..3793a8b749 --- /dev/null +++ b/files/zh-cn/web/api/eventtarget/index.html @@ -0,0 +1,128 @@ +--- +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="https://wiki.developer.mozilla.org/en-US/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> |