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