1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
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>。请查看 <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>
|
