--- 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("/zh-CN/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("/zh-CN/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>属性</th> <th>类型</th> <th>描述</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> <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>