Event.eventPhase

在此页

句法
常量
范例
规范
浏览器兼容性
相关话题

eventPhase 只读特性在 事件 interface indicates which phase of the event flow is currently being evaluated.

句法

let phase = event.eventPhase;

值

Returns an integer value which specifies the current evaluation phase of the event flow. Possible values are listed in Event phase constants .

常量

Event phase constants

These values describe which phase the event flow is currently being evaluated.

常量	值	描述
`Event.NONE`	`0`	No event is being processed at this time.
`Event.CAPTURING_PHASE`	`1`	The event is being propagated through the target's ancestor objects. This process starts with the `Window` ，那么 `Document` , then the `HTMLHtmlElement` , and so on through the elements until the target's parent is reached. Event listeners registered for capture mode when `EventTarget.addEventListener()` was called are triggered during this phase.
`Event.AT_TARGET`	`2`	The event has arrived at the event's target . Event listeners registered for this phase are called at this time. If `Event.bubbles` is `false` , processing the event is finished after this phase is complete.
`Event.BUBBLING_PHASE`	`3`	The event is propagating back up through the target's ancestors in reverse order, starting with the parent, and eventually reaching the containing `Window` . This is known as bubbling , and occurs only if `Event.bubbles` is `true` . Event listeners registered for this phase are triggered during this process.

更多细节，见 section 3.1, Event dispatch and DOM event flow , of the DOM Level 3 Events specification.

范例

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

let 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 (let i = 0; i < divs.length; i++) {
    let d = divs[i]
    if (d.id != "divInfo") {
      d.removeEventListener("click", OnDivClick, true)
      d.removeEventListener("click", OnDivClick, false)
    }
  }
}
function AddListeners() {
  for (let i = 0; i < divs.length; i++) {
    let d = divs[i]
    if (d.id != "divInfo") {
        if (chCapture.checked) {
            d.addEventListener("click", OnDivClick, true)
        }
        else {
            d.addEventListener("click", OnDivClick, false)
            d.onmousemove = function () { clear = true }
        }
    }
  }
}
function OnDivClick(e) {
  if (clear) {
    Clear()
    clear = false
  }
  if (e.eventPhase == 2)
    e.currentTarget.style.backgroundColor = 'red';
    let 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 (let i = 0; i < divs.length; i++) {
    if (divs[i].id != "divInfo") {
      divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff"
    }
  }
  divInfo.innerHTML = ''
}

结果

规范

规范	状态	注释
DOM The definition of 'Event.eventPhase' in that specification.	实时标准
DOM4 The definition of 'Event.eventPhase' in that specification.	过时
DOM (文档对象模型) 2 级事件规范 The definition of 'Event.eventPhase' in that specification.	过时	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`eventPhase`	Chrome 45	Edge 12	Firefox Yes	IE 9	Opera 32	Safari Yes	WebView Android 45	Chrome Android 45	Firefox Android Yes	Opera Android 32	Safari iOS Yes	Samsung Internet Android 5.0

图例

完整支持

元数据

最后修改： Dec 1, 2019

DOM (文档对象模型)
事件
构造函数
1. 事件
特性
1. bubbles
2. cancelable
3. cancelBubble
4. composed
5. currentTarget
6. defaultPrevented
7. eventPhase
8. explicitOriginalTarget
9. isTrusted
10. originalTarget
11. returnValue
12. srcElement
13. target
14. timeStamp
15. type
方法
事件
1. bubbles
2. cancelable
3. cancelBubble
4. composed
5. composedPath
6. currentTarget
7. defaultPrevented
8. 事件
9. eventPhase
10. initEvent
11. isTrusted
12. preventDefault
13. returnValue
14. stopImmediatePropagation
15. stopPropagation
16. target
17. timeStamp
18. type
DOM 相关页面

在此页

句法

值

常量

Event phase constants

范例

HTML

CSS

JavaScript

结果

规范

浏览器兼容性

图例

相关话题