현재 발생중인 이벤트 흐름의 단계를 나타냅니다.
Syntax
var phase = event.eventPhase;
이벤트 흐름의 최근 실행 단계에 대한 지정된 정수값을 반환합니다. 가능한 값은 이벤트 단계 상수 목록을 참조.
Constants
Event phase constants
이 값들은 이벤트 흐름의 현재 실행 단계를 나타냅니다.
Constant | Value | Description |
---|---|---|
Event.NONE |
0 | 아무런 이벤트도 발생하지 않았습니다. |
Event.CAPTURING_PHASE |
1 | 이벤트가 상위 개체를 통해 전파됩니다. 이 프로세스는 Window , Document 에서 시작하여, HTMLHtmlElement 등 대상의 부모에 도달할 때까지 요소들을 통과합니다. 이 단계에서 EventTarget.addEventListener() 가 호출될 때 캡처 모드에 있는 Event listeners 가 트리거됩니다. |
Event.AT_TARGET |
2 | 이벤트가 the event's target에 도착했습니다. 이 단계에서 등록된 이벤트 리스너가 이 때 호출됩니다. 만약 Event.bubbles 이 false 라면, 이 단계가 완료된 다음 이벤트 진행은 종료됩니다. |
Event.BUBBLING_PHASE |
3 | 이벤트가 역순으로 대상의 조상을 통해 전파됩니다. 대상의 부모부터 시작해서, Window 를 포함하는 단계까지 도달합니다. 이는 버블링으로 알려져 있으며, Event.bubbles 가 true 일 때만 발생합니다. 이 프로세스 중에 이 단계에 등록된 Event listeners 가 트리거됩니다. |
더 상세한 내용은 DOM Level 3 Events 명세인 section 3.1, Event dispatch and DOM event flow 를 참고하세요.
Example
HTML Content
<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>
CSS Content
div {
margin: 20px;
padding: 4px;
border: thin black solid;
}
#divInfo {
margin: 18px;
padding: 8px;
background-color:white;
font-size:80%;
}
JavaScript Content
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 = '';
}
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'Event.eventPhase' in that specification. |
Living Standard | |
DOM4 The definition of 'Event.eventPhase' in that specification. |
Obsolete | |
Document Object Model (DOM) Level 2 Events Specification The definition of 'Event.eventPhase' in that specification. |
Obsolete | Initial definition |