diff options
Diffstat (limited to 'files/zh-cn/web/api/document/createevent/index.html')
| -rw-r--r-- | files/zh-cn/web/api/document/createevent/index.html | 189 |
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> |
