这篇翻译不完整。请帮忙从英语翻译这篇文章。
表示事件流当前处于哪一个阶段
语法
var phase = event.eventPhase;
返回一个代表当前执行阶段的 整数值,下面列出了不同的执行阶段Event phase constants.
常量
事件阶段常量
下面这些值表示了事件流当前执行的阶段。
常量 | 值 | 描述 |
---|---|---|
Event.NONE |
0 | 这个时间,没有事件正在被处理 |
Event.CAPTURING_PHASE |
1 | 事件正在被目标元素的祖先对象处理. 这个处理过程从Window 开始,然后Document , 然后是HTMLHtmlElement , 一直这样,直到目标元素的父元素。 通过EventTarget.addEventListener() 注册为捕获模式的Event listeners 被调用。 |
Event.AT_TARGET |
2 | 事件对象已经抵达the event's target. 为这个阶段注册的事件监听被调用。 如果 Event.bubbles 的值为false, 对事件对象的处理在这个阶段后就会结束. |
Event.BUBBLING_PHASE |
3 | 事件对象逆向向上传播回目标元素的祖先元素, 从父亲元素开始,并且最终到达包含元素 Window . 这就是冒泡,并且只有Event.bubbles 值为true的时候才会发生。 为这个阶段注册的Event listeners 在这个过程中被触发. |
更多细节,请看section 3.1, Event dispatch and DOM event flow, DOM 级别 3 的事件说明。
例子
HTML 内容
<h4>Event Propagation Chain</h4> <ul> <li>Click 'd1'</li> <li>Analyse 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 内容
div { margin: 20px; padding: 4px; border: thin black solid; } #divInfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; }
JavaScript 内容
var 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 (var i = 0; i < divs.length; i++) { var d = divs[i]; if (d.id != "divInfo") { d.removeEventListener("click", OnDivClick, true); d.removeEventListener("click", OnDivClick, false); } } } function AddListeners() { for (var i = 0; i < divs.length; i++) { var d = divs[i]; if (d.id != "divInfo") { d.addEventListener("click", OnDivClick, false); if (chCapture.checked) d.addEventListener("click", OnDivClick, true); d.onmousemove = function () { clear = true; }; } } } function OnDivClick(e) { if (clear) { Clear(); clear = false; } if (e.eventPhase == 2) e.currentTarget.style.backgroundColor = 'red'; var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error"; divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>"; } function Clear() { for (var i = 0; i < divs.length; i++) { if (divs[i].id != "divInfo") divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff"; } divInfo.innerHTML = ''; }
说明
Specification | Status | Comment |
---|---|---|
DOM Event.eventPhase |
Living Standard | |
DOM4 Event.eventPhase |
Recommendation | |
Document Object Model (DOM) Level 2 Events Specification Event.eventPhase |
Recommendation | Initial definition |