Event.eventPhase

表示事件流当前处于哪一个阶段。

语法

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

文档标签和贡献者

 此页面的贡献者: Cattla, guoyang
 最后编辑者: Cattla,