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
|
---
title: Event.eventPhase
slug: Web/API/Event/eventPhase
tags:
- Property
- Read-only
- Reference
browser-compat: api.Event.eventPhase
translation_of: Web/API/Event/eventPhase
---
{{ApiRef("DOM")}}
{{domxref("Event")}} 인터페이스의 **`eventPhase`** 읽기 전용 속성은 현재 평가 중인 이벤트 흐름 단계를 나타냅니다.
## 값
이벤트 흐름의 단계를 나타내는 정수 값을 반환합니다. 가능한 값은 다음과 같습니다.
- `Event.NONE (0)`
- : 이 이벤트는 현재 처리 중이 아닙니다.
- `Event.CAPTURING_PHASE (1)`
- : 이벤트가 대상의 부모 객체를 통해 전파 중입니다. 이 단계는 {{domxref("Window")}}에서 시작해서, {{domxref("Document")}}, {{domxref("HTMLHtmlElement")}}를 거쳐 이벤트가 대상의 부모에 도달할 때까지 지속됩니다. {{domxref("EventTarget.addEventListener()")}}로 등록한 [이벤트 수신기](/ko/docs/Web/API/EventListener) 중 캡처 모드로 등록한 수신기는 이 단계에서 발동합니다.
- `Event.AT_TARGET (2)`
- : 이벤트가 [이벤트 대상](/ko/docs/Web/API/EventTarget)에 도착했습니다. {{domxref("Event.bubbles")}}가 `false`면 `Event.AT_TARGET` 단계가 끝남과 동시에 이벤트 처리도 마칩니다.
- `Event.BUBBLING_PHASE (3)`
- : 이벤트가 대상의 조상을 따라 역순으로 전파 중입니다. 이 단계는 대상의 부모에서 시작해서 마침내 {{domxref("Window")}}에 도달할 때까지 지속됩니다. 이 동작을 버블링이라고 부르며, {{domxref("Event.bubbles")}}가 `true`여야 발생합니다. [이벤트 수신기](/ko/docs/Web/API/EventListener) 중 캡처 모드가 아닌 수신기는 이 단계에서 발동합니다.
## 예제
### HTML
```html
<h4>이벤트 전파 체인</h4>
<ul>
<li>'d1'을 클릭하세요</li>
<li>이벤트의 전파 과정을 확인하세요</li>
<li>다음 div를 클릭해서 위의 과정을 반복하세요</li>
<li>캡처 모드를 변경하세요</li>
<li>위의 과정을 반복하세요</li>
</ul>
<input type="checkbox" id="chCapture" />
<label for="chCapture">캡처 사용</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>
```
### CSS
```css
div {
margin: 20px;
padding: 4px;
border: thin black solid;
}
#divInfo {
margin: 18px;
padding: 8px;
background-color:white;
font-size:80%;
}
```
### JavaScript
```js
let 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 (let i = 0; i < divs.length; i++) {
let d = divs[i]
if (d.id != "divInfo") {
d.removeEventListener("click", OnDivClick, true)
d.removeEventListener("click", OnDivClick, false)
}
}
}
function AddListeners() {
for (let i = 0; i < divs.length; i++) {
let 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';
const level =
e.eventPhase == 0 ? "없음" :
e.eventPhase == 1 ? "캡처" :
e.eventPhase == 2 ? "대상" :
e.eventPhase == 3 ? "버블" : "오류";
const p = document.createElement('p')
p.textContent = `${e.currentTarget.id}; eventPhase: ${level}`;
divInfo.appendChild(p);
}
function Clear() {
for (let i = 0; i < divs.length; i++) {
if (divs[i].id != "divInfo") {
divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff"
}
}
divInfo.textContent = '';
}
```
### 결과
{{EmbedLiveSample('예제', '', '700')}}
## 명세
{{Specifications}}
## 브라우저 호환성
{{Compat}}
|
