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
|
---
title: Event.eventPhase
slug: Web/API/Event/eventPhase
translation_of: Web/API/Event/eventPhase
---
<p>{{ApiRef("DOM")}}</p>
<p>表示事件物件目前於事件流（Event Flow）中傳遞的進度為哪一個階段。</p>
<h2 id="語法">語法</h2>
<pre class="brush: js"><em>var phase</em> = event.eventPhase;
</pre>
<p>回傳一個整數值以代表目前事件於事件流中的傳遞階段，可能的值將於<a href="#事件傳遞階段常數">事件傳遞階段常數</a>說明。</p>
<h2 id="常數">常數</h2>
<h3 id="事件傳遞階段常數">事件傳遞階段常數</h3>
<p>These values describe which phase the event flow is currently being evaluated.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">常數</th>
<th scope="col">值</th>
<th scope="col">說明</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{domxref("Event.NONE")}} {{readonlyinline}}</td>
<td>0</td>
<td>No event is being processed at this time.</td>
</tr>
<tr>
<td>{{domxref("Event.CAPTURING_PHASE")}} {{readonlyinline}}</td>
<td>1</td>
<td>The event is being propagated through the target's ancestor objects. This process starts with the {{domxref("Window")}}, then {{domxref("Document")}}, then the {{domxref("HTMLHtmlElement")}}, and so on through the elements until the target's parent is reached. {{domxref("EventListener", "Event listeners", "", 1)}} registered for capture mode when {{domxref("EventTarget.addEventListener()")}} was called are triggered during this phase.</td>
</tr>
<tr>
<td>{{domxref("Event.AT_TARGET")}} {{readonlyinline}}</td>
<td>2</td>
<td>The event has arrived at {{domxref("EventTarget", "the event's target", "", 1)}}. Event listeners registered for this phase are called at this time. If {{domxref("Event.bubbles")}} is false, processing the event is finished after this phase is complete.</td>
</tr>
<tr>
<td>{{domxref("Event.BUBBLING_PHASE")}} {{readonlyinline}}</td>
<td>3</td>
<td>The event is propagating back up through the target's ancestors in reverse order, starting with the parent, and eventually reaching the containing {{domxref("Window")}}. This is known as bubbling, and occurs only if {{domxref("Event.bubbles")}} is <code>true</code>. {{domxref("EventListener", "Event listeners", "", 1)}} registered for this phase are triggered during this process.</td>
</tr>
</tbody>
</table>
<p>For more details, see <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a>, of the DOM Level 3 Events specification.</p>
<h2 id="Example" name="Example">範例</h2>
<h3 id="HTML_Content">HTML Content</h3>
<pre class="brush: html"><h4>Event Propagation Chain</h4>
<ul>
<li>Click 'd1'</li>
<li>Analyse event propagation chain</li>
<li>Click next div and repeat the experience</li>
<li>Change Capturing mode</li>
<li>Repeat the experience</li>
</ul>
<input type="checkbox" id="chCapture" />
<label for="chCapture">Use Capturing</label>
<div id="d1">d1
<div id="d2">d2
<div id="d3">d3
<div id="d4">d4</div>
</div>
</div>
</div>
<div id="divInfo"></div>
</pre>
<h3 id="CSS_Content">CSS Content</h3>
<pre class="brush: css">div {
margin: 20px;
padding: 4px;
border: thin black solid;
}
#divInfo {
margin: 18px;
padding: 8px;
background-color:white;
font-size:80%;
}</pre>
<h3 id="JavaScript_Content">JavaScript Content</h3>
<pre class="brush: js">var clear = false, divInfo = null, divs = null, useCapture = false;
window.onload = function () {
divInfo = document.getElementById("divInfo");
divs = document.getElementsByTagName('div');
chCapture = document.getElementById("chCapture");
chCapture.onclick = function () {
RemoveListeners();
AddListeners();
}
Clear();
AddListeners();
}
function RemoveListeners() {
for (var i = 0; i < divs.length; i++) {
var d = divs[i];
if (d.id != "divInfo") {
d.removeEventListener("click", OnDivClick, true);
d.removeEventListener("click", OnDivClick, false);
}
}
}
function AddListeners() {
for (var i = 0; i < divs.length; i++) {
var d = divs[i];
if (d.id != "divInfo") {
d.addEventListener("click", OnDivClick, false);
if (chCapture.checked)
d.addEventListener("click", OnDivClick, true);
d.onmousemove = function () { clear = true; };
}
}
}
function OnDivClick(e) {
if (clear) {
Clear(); clear = false;
}
if (e.eventPhase == 2)
e.currentTarget.style.backgroundColor = 'red';
var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error";
divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>";
}
function Clear() {
for (var i = 0; i < divs.length; i++) {
if (divs[i].id != "divInfo")
divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff";
}
divInfo.innerHTML = '';
}
</pre>
<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p>
<h2 id="規範">規範</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</th>
</tr>
<tr>
<td>{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}</td>
<td>{{Spec2("DOM WHATWG")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}</td>
<td>{{Spec2("DOM4")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td>
<td>{{Spec2("DOM2 Events")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
|
