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>表示事件流当前处于哪一个阶段。</p>
<h2 id="语法">语法</h2>
<pre class="brush: js"><em>var phase</em> = event.eventPhase;
</pre>
<p>返回一个代表当前执行阶段的 整数值，下面列出了不同的执行阶段{{anch("Event phase constants")}}.</p>
<h2 id="常量">常量</h2>
<h3 id="事件阶段常量">事件阶段常量</h3>
<h3 id="下面这些值表示了事件流当前执行的阶段。"><span style="font-size: 14px; line-height: 21px;">下面这些值表示了事件流当前执行的阶段。</span></h3>
<table class="standard-table">
<thead>
<tr>
<th scope="col">常量</th>
<th scope="col">值</th>
<th scope="col">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Event.NONE</code></td>
<td>0</td>
<td>这个时间，没有事件正在被处理</td>
</tr>
<tr>
<td><code>Event.CAPTURING_PHASE</code></td>
<td>1</td>
<td>事件正在被目标元素的祖先对象处理. 这个处理过程从{{domxref("Window")}}开始，然后{{domxref("Document")}}, 然后是{{domxref("HTMLHtmlElement")}}, 一直这样，直到目标元素的父元素。 通过{{domxref("EventTarget.addEventListener()")}} 注册为捕获模式的{{domxref("EventListener", "Event listeners", "", 1)}} 被调用。</td>
</tr>
<tr>
<td><code>Event.AT_TARGET</code></td>
<td>2</td>
<td>事件对象已经抵达{{domxref("EventTarget", "the event's target", "", 1)}}. 为这个阶段注册的事件监听被调用。 如果 {{domxref("Event.bubbles")}} 的值为false, 对事件对象的处理在这个阶段后就会结束.</td>
</tr>
<tr>
<td><code>Event.BUBBLING_PHASE</code></td>
<td>3</td>
<td>事件对象逆向向上传播回目标元素的祖先元素, 从父亲元素开始，并且最终到达包含元素 {{domxref("Window")}}. 这就是冒泡，并且只有{{domxref("Event.bubbles")}} 值为true的时候才会发生。 为这个阶段注册的{{domxref("EventListener", "Event listeners", "", 1)}} 在这个过程中被触发.</td>
</tr>
</tbody>
</table>
<p>更多细节，请看<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>, DOM 级别 3 的事件说明。</p>
<h2 id="Example" name="Example">例子</h2>
<h3 id="HTML_内容">HTML 内容</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_内容">CSS 内容</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_内容">JavaScript 内容</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>
|
