blob: 8bd616a73d838e8fcc50df636e08de89af5fb715 (
plain)
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
|
---
title: 建立或觸發事件
slug: orphaned/Web/Guide/Events/Creating_and_triggering_events
tags:
- Advanced
- DOM
- Guide
- JavaScript
- 事件
translation_of: Web/Guide/Events/Creating_and_triggering_events
original_slug: Web/Guide/Events/Creating_and_triggering_events
---
<p>本文介紹如何建立和觸發事件。</p>
<h2 id="建立自定義事件">建立自定義事件</h2>
<p>事件可以用 {{domxref("Event")}} constructor 建立，如下所示：</p>
<pre class="brush: js">var event = new Event('build');
// 監聽事件
elem.addEventListener('build', function (e) { ... }, false);
// 觸發事件
elem.dispatchEvent(event);</pre>
<p>除了 Internet Explorer 以外，大多數的瀏覽器都支持這個 constructor 。若要能夠支援 Internet Explore 的更詳細的方法，可以參考段落《<a href="#早期的做法" title="早期的作法">早期的做法</a>》。</p>
<h3 id="增加自定義的資料－－CustomEvent()">增加自定義的資料－－CustomEvent()</h3>
<p>要在事件的 object 追加其他資料，能使用 {{domxref("CustomEvent")}} 介面。它有 <u><strong>detail</strong></u> 屬性，可以用來傳送自訂資料。<br>
<span style="line-height: 1.5;">舉例來說，可以以下面方式建立事件：</span></p>
<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
<p>它可以讓你傳送自訂資料到事件的監聽器：</p>
<pre class="brush: js">function eventHandler(e) {
log('The time is: ' + e.detail);
}
</pre>
<h3 id="早期的做法">早期的做法</h3>
<p>早期建立事件的方式參考了 Java 的 API 。下為一個早期作法的例子：</p>
<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);
// 事件對象可以是任一 HTML 元素或是 EventTarget 。
elem.dispatchEvent(event);
</pre>
<h2 id="觸發自定義事件">觸發自定義事件</h2>
<p>下面的例子演示了一個複選框藉由 DOM 的 methods 模擬一次點擊（換言之，讓程式執行一次「點擊事件」。）。 <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">觀看實例</a>。</p>
<pre class="brush: js">function simulateClick() {
var event = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
});
var cb = document.getElementById('checkbox');
var canceled = !cb.dispatchEvent(event);
if (canceled) {
// A handler called preventDefault.
alert("canceled");
} else {
// None of the handlers called preventDefault.
alert("not canceled");
}
}</pre>
<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">瀏覽器的支援度</h2>
<h2 id="sect1"> </h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th style="line-height: 16px;">Feature</th>
<th style="line-height: 16px;">Chrome</th>
<th style="line-height: 16px;">Firefox (Gecko)</th>
<th style="line-height: 16px;">Edge</th>
<th style="line-height: 16px;">Internet Explorer</th>
<th style="line-height: 16px;">Opera</th>
<th style="line-height: 16px;">Safari (WebKit)</th>
</tr>
<tr>
<td><code>Event()</code> constructor</td>
<td>15</td>
<td>11</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>11.60</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th style="line-height: 16px;">Feature</th>
<th style="line-height: 16px;">Android</th>
<th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
<th style="line-height: 16px;">IE Mobile</th>
<th style="line-height: 16px;">Opera Mobile</th>
<th style="line-height: 16px;">Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
<h2 id="延伸閱讀">延伸閱讀</h2>
<ul>
<li>{{domxref("document.createEvent()")}}</li>
<li>{{domxref("Event.initEvent()")}}</li>
<li>{{domxref("EventTarget.dispatchEvent()")}}</li>
<li>{{domxref("EventTarget.addEventListener()")}}</li>
</ul>
|
