---
title: Document.createEvent()
slug: Web/API/Document/createEvent
translation_of: Web/API/Document/createEvent
---
<div class="warning">
<p><code>createEvent使用的许多方法</code>, 如 <code>initCustomEvent</code>, 都被废弃了. 请使用 <a href="/zh/docs/Web/API/CustomEvent" title="/en-US/docs/Web/API/CustomEvent">event constructors</a> 来替代.</p>
</div>

<div>{{ ApiRef("DOM") }}</div>

<div> </div>

<p>创建一个指定类型的<a href="/zh-CN/docs/Web/API/Event">事件</a>。其返回的对象必须先初始化并可以被传递给 <a href="/zh-CN/docs/DOM/element.dispatchEvent" title="DOM/element.dispatchEvent">element.dispatchEvent</a>。</p>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="syntaxbox">var <em>event</em> = <em>document</em>.createEvent(<em>type</em>);
</pre>

<ul>
 <li><code>event</code> 就是被创建的 <a href="/zh-CN/docs/DOM/event" title="DOM/event">Event</a> 对象.</li>
 <li><code>type</code> 是一个字符串，表示要创建的事件类型。事件类型可能包括<code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code>, 或者 <code>"HTMLEvents"</code>。请查看 <a href="#notes">Notes</a> 章节获取详细信息 。</li>
</ul>

<h2 id="Example" name="Example">示例</h2>

<pre class="brush: js">// 创建事件
var event = document.createEvent('Event');

// 定义事件名为'build'.
event.initEvent('build', true, true);

// 监听事件
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// 触发对象可以是任何元素或其他事件目标
elem.dispatchEvent(event);
</pre>

<h3 id="Notes" name="Notes">参考</h3>

<ul>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a></li>
</ul>

<h2 id="Notes" name="Notes">注意</h2>

<p>Event type字符串只能传递事件模块中定义的值给CreateEvent。其中一些事件模块是在DOM事件规范定义的，还有些事在其他规范定义的（如SVG），还有一些是Gecko-specific事件。详情见下表。</p>

<p><em>To-do: 添加事件名称到下表中。</em></p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <th>事件模块</th>
   <th>传递给 <code>createEvent的</code>Event type</th>
   <th>事件初始化方法</th>
  </tr>
  <tr style="background-color: #eee;">
   <td colspan="3"><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings">DOM Level 2 Events</a></td>
  </tr>
  <tr>
   <td>User Interface event module</td>
   <td><code>"UIEvents"</code></td>
   <td><a href="/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">event.initUIEvent</a></td>
  </tr>
  <tr>
   <td>Mouse event module</td>
   <td><code>"MouseEvents"</code></td>
   <td><a href="/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">event.initMouseEvent</a></td>
  </tr>
  <tr>
   <td>Mutation event module</td>
   <td><code>"MutationEvents"</code></td>
   <td><a href="/en-US/docs/DOM/event.initMutationEvent" title="DOM/event.initMutationEvent">event.initMutationEvent</a></td>
  </tr>
  <tr>
   <td>HTML event module</td>
   <td><code>"HTMLEvents"</code></td>
   <td><a href="/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">event.initEvent</a></td>
  </tr>
  <tr style="background-color: #eee;">
   <td colspan="3"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/">DOM Level 3 Events</a></td>
  </tr>
  <tr>
   <td>User Interface event module</td>
   <td><code>"UIEvent"</code>, <code>"UIEvents"</code></td>
   <td><a href="/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">event.initUIEvent</a></td>
  </tr>
  <tr>
   <td>Mouse event module</td>
   <td><code>"MouseEvent"</code>, <code>"MouseEvents"</code></td>
   <td><a href="/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">event.initMouseEvent</a></td>
  </tr>
  <tr>
   <td>Mutation event module</td>
   <td><code>"MutationEvent"</code>, <code>"MutationEvents"</code></td>
   <td><a href="/en-US/docs/DOM/event.initMutationEvent" title="DOM/event.initMutationEvent">event.initMutationEvent</a></td>
  </tr>
  <tr>
   <td>Mutation name event module (not implemented in Gecko as of June 2006)</td>
   <td><code>"MutationNameEvent"</code></td>
   <td><a href="/en-US/docs/DOM/event.initMutationNameEvent" title="DOM/event.initMutationNameEvent">event.initMutationNameEvent</a></td>
  </tr>
  <tr>
   <td>Text event module</td>
   <td><code>"TextEvent"</code> (Gecko also supports <code>"TextEvents"</code>)</td>
   <td><a href="/en-US/docs/DOM/event.initTextEvent" title="DOM/event.initTextEvent">event.initTextEvent</a> (not implemented)</td>
  </tr>
  <tr>
   <td>Keyboard event module</td>
   <td><code>"KeyboardEvent"</code> (Gecko also supports <code>"KeyEvents"</code>)</td>
   <td><a href="/en-US/docs/DOM/event.initKeyEvent" title="DOM/event.initKeyEvent">event.initKeyEvent</a> (Gecko-specific; the DOM 3 Events working draft uses <code>initKeyboardEvent</code> instead)</td>
  </tr>
  <tr>
   <td>Custom event module {{gecko_minversion_inline("6.0")}}</td>
   <td><code>"CustomEvent"</code></td>
   <td><a href="/en-US/docs/DOM/CustomEvent" title="DOM/event.initKeyEvent">event.initCustomEvent</a></td>
  </tr>
  <tr>
   <td>Basic events module</td>
   <td><code>"Event"</code> (Gecko also supports <code>"Events"</code>)</td>
   <td><a href="/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">event.initEvent</a></td>
  </tr>
  <tr style="background-color: #eee;">
   <td colspan="3"><a class="external" href="http://www.w3.org/TR/SVG/script.html#DOMInterfaces">SVG 1.1 Scripting</a></td>
  </tr>
  <tr>
   <td rowspan="2">SVG</td>
   <td><code>"SVGEvents"</code> (Gecko also supports <code>"SVGEvent"</code>)</td>
   <td><a href="/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">event.initEvent</a></td>
  </tr>
  <tr>
   <td><code>"SVGZoomEvents"</code> (Gecko also supports <code>"SVGZoomEvent"</code>)</td>
   <td><a href="/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">event.initUIEvent</a></td>
  </tr>
  <tr style="background-color: #eee;">
   <td colspan="3">Other event types supported by Gecko </td>
  </tr>
  <tr>
   <td rowspan="4">-</td>
   <td><code>"MessageEvent"{{Gecko_minversion_inline(1.9)}}</code></td>
   <td><a href="/en-US/docs/DOM/event.initMessageEvent" title="DOM/event.initMessageEvent">event.initMessageEvent</a></td>
  </tr>
  <tr>
   <td><code>"MouseScrollEvents"</code>, <code>"PopupEvents"</code></td>
   <td><a href="/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">event.initMouseEvent</a></td>
  </tr>
  <tr>
   <td><code>"PopupBlockedEvents"</code></td>
   <td><a href="/en-US/docs/DOM/event.initPopupBlockedEvent" title="DOM/event.initPopupBlockedEvent">event.initPopupBlockedEvent</a></td>
  </tr>
  <tr>
   <td><code>"XULCommandEvent"</code>, <code>"XULCommandEvents"</code></td>
   <td><a href="/en-US/docs/DOM/event.initCommandEvent" title="DOM/event.initCommandEvent">event.initCommandEvent</a></td>
  </tr>
  <tr>
   <td>Progress Events</td>
   <td><code>"ProgressEvent"</code></td>
   <td>{{domxref("ProgressEvent.initProgressEvent()")}}{{deprecated_inline("22.0")}}{{non-standard_inline()}}</td>
  </tr>
  <tr>
   <td>Animation Events</td>
   <td><code>"AnimationEvent"</code> (or <code>"WebKitAnimationEvent"</code> for WebKit/Blink-based browsers)</td>
   <td>{{domxref("AnimationEvent.initAnimationEvent()")}}{{deprecated_inline("23.0")}}{{non-standard_inline()}}</td>
  </tr>
  <tr>
   <td>Transition Events</td>
   <td><code>"TransitionEvent"</code> (or <code>"WebKitTransitionEvent"</code> for WebKit/Blink-based browsers)</td>
   <td>{{domxref("TransitionEvent.initTransitionEvent()")}}{{deprecated_inline("23.0")}}{{non-standard_inline()}}</td>
  </tr>
 </tbody>
</table>

<p>有些事件可以使用两种事件类型参数，这是因为DOM Level 3 Events将事件类型参数更改为单数形式，但是仍然支持老的复数形式以向后兼容。</p>

<h2 id="Specification" name="Specification">规范</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 2 Events: createEvent</a></li>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent">DOM Level 3 Events: createEvent</a></li>
</ul>

<p> </p>

<p> </p>