---
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>