diff options
Diffstat (limited to 'files/zh-cn/web/api/customevent/index.html')
-rw-r--r-- | files/zh-cn/web/api/customevent/index.html | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/customevent/index.html b/files/zh-cn/web/api/customevent/index.html new file mode 100644 index 0000000000..150dcc5ac3 --- /dev/null +++ b/files/zh-cn/web/api/customevent/index.html @@ -0,0 +1,148 @@ +--- +title: CustomEvent +slug: Web/API/CustomEvent +translation_of: Web/API/CustomEvent +--- +<p>{{APIRef("DOM")}}</p> + +<p><code>CustomEvent </code>事件是由程序创建的,可以有任意自定义功能的事件。</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="构造函数">构造函数</h2> + +<p><strong style="font-weight: bold;">{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}} </strong>创建一个自定义事件。</p> + +<h2 id="属性">属性</h2> + +<p><strong style="font-weight: bold;">{{domxref("CustomEvent.detail")}} {{readonlyinline}} 任何时间初始化时传入的数据</strong></p> + +<p><em>此接口从父接口继承属性, </em>{{domxref("Event")}}:</p> + +<p>{{Page("/en-US/docs/Web/API/Event", "Properties")}}</p> + +<h2 id="方法">方法</h2> + +<p> </p> + +<dl> + <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt> + <dd> + <p>初始化一个<code>CustomEvent 对象.如果事件已经被触发,这个方法不起任何作用.</code></p> + </dd> +</dl> + +<p><em>此接口从父接口继承方法, </em>{{domxref("Event")}}:</p> + +<p>{{Page("/en-US/docs/Web/API/Event", "Methods")}}</p> + +<p> </p> + +<h2 id="Method_overview" name="Method_overview">方法概述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="#initCustomEvent()">initCustomEvent</a>(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);</code></td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Attribute</th> + <th>Type</th> + <th>Description</th> + </tr> + <tr> + <td><code>detail</code></td> + <td><code>any</code></td> + <td>当事件初始化时传递的数据</td> + </tr> + </tbody> +</table> + +<h2 id="Methods" name="Methods">方法</h2> + +<h3 id="initCustomEvent()" name="initCustomEvent()">initCustomEvent()</h3> + +<p>初始化一个自定义事件的方式和初始化一个标准DOM事件的方式非常相似.</p> + +<pre class="eval">void initCustomEvent( + in DOMString type, + in boolean canBubble, + in boolean cancelable, + in any detail +); +</pre> + +<h4 id="Parameters" name="Parameters">参数</h4> + +<dl> + <dt><code>type</code></dt> + <dd>事件的类型名称.</dd> + <dt><code>canBubble</code></dt> + <dd>一个布尔值,表明该事件是否会冒泡.</dd> + <dt><code>cancelable</code></dt> + <dd>一个布尔值,表明该事件是否可以被取消.</dd> + <dt><code>detail</code></dt> + <dd>当事件初始化时传递的数据.</dd> +</dl> + +<h2 id="构造函数_2">构造函数</h2> + +<p><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM4 规范</a> 添加了对 <code>CustomEvent</code> 构造函数的支持.</p> + +<pre>CustomEvent( + DOMString type, + optional CustomEventInit eventInitDict +) +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<dl> + <dt><code>type</code></dt> + <dd>事件的类型名称.</dd> + <dt><code>eventInitDict</code></dt> + <dd>一个对象,提供了事件的配置信息.查看<a href="#CustomEventInit">CustomEventInit</a>了解更多详情.</dd> +</dl> + +<h4 id="CustomEventInit" name="CustomEventInit">CustomEventInit</h4> + +<dl> + <dt><code>bubbles</code></dt> + <dd>一个布尔值,表明该事件是否会冒泡.</dd> + <dt><code>cancelable</code></dt> + <dd>一个布尔值,表明该事件是否可以被取消.</dd> + <dt><code>detail</code></dt> + <dd>当事件初始化时传递的数据.</dd> +</dl> + +<h3 id="CustomEvent_example_usage" name="CustomEvent_example_usage">CustomEvent用法示例</h3> + +<p></p> + +<pre class="brush: js">// 添加一个适当的事件监听器 +obj.addEventListener("cat", function(e) { process(e.detail) }) + +// 创建并分发事件 +var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}}) +obj.dispatchEvent(event) +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + + + +<p>{{Compat("api.CustomEvent")}}</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li>{{ spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-customevent","DOM4 : Interface CustomEvent","ED") }}</li> + <li>{{ spec("http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#interface-CustomEvent","DOM Level 3 Events : CustomEvent","WD") }}</li> +</ul> |