Event: eventPhase-Eigenschaft

Baseline Widely available

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

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die schreibgeschützte eventPhase-Eigenschaft des Event-Interfaces gibt an, welche Phase des Ereignisflusses derzeit ausgewertet wird.

Wert

Gibt einen ganzzahligen Wert zurück, der die aktuelle Auswertungsphase des Ereignisflusses angibt. Mögliche Werte sind:

Event.NONE (0): Das Ereignis wird derzeit nicht verarbeitet.
Event.CAPTURING_PHASE (1): Das Ereignis wird durch die übergeordneten Objekte des Ziels propagiert. Dieser Prozess beginnt mit dem Window, dann Document, dann dem HTMLHtmlElement und so weiter durch die Elemente, bis das übergeordnete Element des Ziels erreicht ist. Event-Listener, die für den Capture-Modus registriert wurden, als EventTarget.addEventListener() aufgerufen wurde, werden in dieser Phase ausgelöst.
Event.AT_TARGET (2): Das Ereignis ist bei dem Ziel des Ereignisses angekommen. In dieser Phase werden die registrierten Event-Listener aufgerufen. Wenn Event.bubbles false ist, wird die Verarbeitung des Ereignisses nach Abschluss dieser Phase beendet.
Event.BUBBLING_PHASE (3): Das Ereignis propagiert sich in umgekehrter Reihenfolge wieder durch die Vorfahren des Ziels nach oben, beginnend mit dem übergeordneten Element, und erreicht schließlich das umgebende Window. Dies ist bekannt als Bubbling und tritt nur auf, wenn Event.bubbles true ist. Event-Listener registriert für diese Phase werden während dieses Prozesses ausgelöst.

Beispiel

HTML

html

<h4>Event Propagation Chain</h4>
<ul>
  <li>Click 'd1'</li>
  <li>Analyze 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

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;
let divInfo = null;
let divs = null;
let chCapture = null;

window.onload = () => {
  divInfo = document.getElementById("divInfo");
  divs = document.getElementsByTagName("div");
  chCapture = document.getElementById("chCapture");
  chCapture.onclick = () => {
    removeListeners();
    addListeners();
    clearDivs();
  };
  clearDivs();
  addListeners();
};

function removeListeners() {
  for (const div of divs) {
    if (div.id !== "divInfo") {
      div.removeEventListener("click", onDivClick, true);
      div.removeEventListener("click", onDivClick, false);
    }
  }
}

function addListeners() {
  for (const div of divs) {
    if (div.id !== "divInfo") {
      if (chCapture.checked) {
        div.addEventListener("click", onDivClick, true);
      } else {
        div.addEventListener("click", onDivClick, false);
        div.onmousemove = () => {
          clear = true;
        };
      }
    }
  }
}

function onDivClick(e) {
  if (clear) {
    clearDivs();
    clear = false;
  }
  if (e.eventPhase === 2) {
    e.currentTarget.style.backgroundColor = "red";
  }
  const level =
    ["none", "capturing", "target", "bubbling"][e.eventPhase] ?? "error";
  const para = document.createElement("p");
  para.textContent = `${e.currentTarget.id}; eventPhase: ${level}`;
  divInfo.appendChild(para);
}

function clearDivs() {
  for (let i = 0; i < divs.length; i++) {
    if (divs[i].id !== "divInfo") {
      divs[i].style.backgroundColor = i % 2 !== 0 ? "#f6eedb" : "#cceeff";
    }
  }
  divInfo.textContent = "";
}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser