Event.eventPhase

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Event 인터페이스의 eventPhase 읽기 전용 속성은 현재 평가 중인 이벤트 흐름 단계를 나타냅니다.

값

이벤트 흐름의 단계를 나타내는 정수 값을 반환합니다. 가능한 값은 다음과 같습니다.

Event.NONE (0): 이 이벤트는 현재 처리 중이 아닙니다.
Event.CAPTURING_PHASE (1): 이벤트가 대상의 부모 객체를 통해 전파 중입니다. 이 단계는 Window에서 시작해서, Document, HTMLHtmlElement를 거쳐 이벤트가 대상의 부모에 도달할 때까지 지속됩니다. EventTarget.addEventListener()로 등록한 이벤트 수신기 중 캡처 모드로 등록한 수신기는 이 단계에서 발동합니다.
Event.AT_TARGET (2): 이벤트가 이벤트 대상에 도착했습니다. Event.bubbles가 false면 Event.AT_TARGET 단계가 끝남과 동시에 이벤트 처리도 마칩니다.
Event.BUBBLING_PHASE (3): 이벤트가 대상의 조상을 따라 역순으로 전파 중입니다. 이 단계는 대상의 부모에서 시작해서 마침내 Window에 도달할 때까지 지속됩니다. 이 동작을 버블링이라고 부르며, Event.bubbles가 true여야 발생합니다. 이벤트 수신기 중 캡처 모드가 아닌 수신기는 이 단계에서 발동합니다.

예제

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

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 = "";
}

결과

명세

Specification
DOM # ref-for-dom-event-eventphase③