aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/document/createevent/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/api/document/createevent/index.html')
-rw-r--r--files/zh-cn/web/api/document/createevent/index.html189
1 files changed, 189 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/document/createevent/index.html b/files/zh-cn/web/api/document/createevent/index.html
new file mode 100644
index 0000000000..4148af1f48
--- /dev/null
+++ b/files/zh-cn/web/api/document/createevent/index.html
@@ -0,0 +1,189 @@
+---
+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>。请查看 {{Anch("Notes")}} 章节获取详细信息 。</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" {{Fx_minversion_inline(3)}} {{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>