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 ⁨Juli 2015⁩.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

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 zu diesem Zeitpunkt nicht verarbeitet.
Event.CAPTURING_PHASE (1): Das Ereignis wird durch die Vorfahrenobjekte des Ziels weitergeleitet. Dieser Prozess beginnt mit dem Window, dann dem Document, dann dem HTMLHtmlElement und so weiter durch die Elemente, bis der Elternteil des Ziels erreicht wird. Ereignis-Listener, die im Capture-Modus registriert wurden, als EventTarget.addEventListener() aufgerufen wurde, werden in dieser Phase ausgelöst.
Event.AT_TARGET (2): Das Ereignis hat das Ziel des Ereignisses erreicht. Ereignis-Listener, die für diese Phase registriert wurden, werden zu diesem Zeitpunkt aufgerufen. Wenn Event.bubbles false ist, wird die Verarbeitung nach Abschluss dieser Phase beendet.
Event.BUBBLING_PHASE (3): Das Ereignis wird in umgekehrter Reihenfolge wieder zurück durch die Vorfahren des Ziels propagiert, beginnend mit dem Elternteil und schließlich das umgebende Window erreicht. Dies ist als Bubbling bekannt und tritt nur auf, wenn Event.bubbles true ist. Ereignis-Listener, die für diese Phase registriert wurden, 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;
const divInfo = document.getElementById("divInfo");
const divs = document.getElementsByTagName("div");
const chCapture = document.getElementById("chCapture");

chCapture.addEventListener("click", () => {
  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 # ref-for-dom-event-eventphase③

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden