Event.eventPhase

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 Standard # ref-for-dom-event-eventphase③

브라우저 호환성

BCD tables only load in the browser