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="Syntax">Syntax</h2>
<pre class="brush: js"><em>var phase</em> = event.eventPhase;
</pre>
<p>이벤트 흐름의 최근 실행 단계에 대한 지정된 정수값을 반환합니다. 가능한 값은 {{anch("이벤트 단계 상수")}} 목록을 참조.</p>
<h2 id="Constants">Constants</h2>
<h3 id="Event_phase_constants">Event phase constants</h3>
<p>이 값들은 이벤트 흐름의 현재 실행 단계를 나타냅니다.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Constant</th>
<th scope="col">Value</th>
<th scope="col">Description</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")}} 이 <code>false</code> 라면, 이 단계가 완료된 다음 이벤트 진행은 종료됩니다.</td>
</tr>
<tr>
<td><code>Event.BUBBLING_PHASE</code></td>
<td>3</td>
<td>이벤트가 역순으로 대상의 조상을 통해 전파됩니다. 대상의 부모부터 시작해서, {{domxref("Window")}}를 포함하는 단계까지 도달합니다. 이는 버블링으로 알려져 있으며, {{domxref("Event.bubbles")}}가 <code>true</code> 일 때만 발생합니다. 이 프로세스 중에 이 단계에 등록된 {{domxref("EventListener", "Event listeners", "", 1)}} 가 트리거됩니다.</td>
</tr>
</tbody>
</table>
<p>더 상세한 내용은 DOM Level 3 Events 명세인 <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> 를 참고하세요.</p>
<h2 id="Example" name="Example">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") {
if (chCapture.checked)
d.addEventListener("click", OnDivClick, true);
else
d.addEventListener("click", OnDivClick, false);
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="Specifications">Specifications</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>
|
