值
返回一個整數值，指定事件流的當前評估階段。可能的值包括：
Event.NONE(0)-
當前沒有處理事件。
Event.CAPTURING_PHASE(1)-
事件正在透過目標的祖先物件傳播。此過程從
Window開始，然後是Document，然後是HTMLHtmlElement，依此類推，直到到達目標的父元素。在呼叫EventTarget.addEventListener()時為捕獲模式註冊的事件監聽器在此階段被觸發。 Event.AT_TARGET(2)-
事件已到達事件目標。在此階段註冊的事件監聽器會被呼叫。如果
Event.bubbles為false，則在此階段完成後事件處理結束。 Event.BUBBLING_PHASE(3)-
事件正在以相反的順序從目標的祖先向上傳播，從父級開始，最終到達包含它的
Window。這被稱為冒泡，僅當Event.bubbles為true時發生。事件監聽器在此階段被觸發。
示例
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
js
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 = "";
}
結果
規範
| 規範 |
|---|
| DOM # ref-for-dom-event-eventphase③ |
瀏覽器相容性
載入中…