Event对象中的eventPhase属性

参考资料：MDN - Event.eventPhase：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/eventPhase

　　在学习事件的过程中接触到了事件对象中的常量：CAPTURING_PHASE、AT_TARGET和BUBBLING_PHASE（以及某些教程中被遗忘的NONE）。

　　一开始我是像下面这样写，想看看eventPhase属性值的变化：

 1 <button>点我</button>
 2 <script type="text/JavaScript">
 3     var ele = document.getElementsByTagName("button")[0];
 4     ele.addEventListener("click",function(event) {
 5         console.log("event.eventPhase的值：" + event.eventPhase);
 6     },true);/* 绑定在捕获阶段 */
 7     ele.addEventListener("click",function(event) {
 8         console.log("event.eventPhase的值：" + event.eventPhase);
 9     },false);/* 绑定在冒泡阶段 */
10 </script>

　　但运行结果永远是

　　网上一查，在JS高程（应该是《Javascript高级程序设计》这本书）中有这样一句话："尽管处于目标发生在冒泡阶段，但eventPhase仍然一直等于2"。

　　返回2我能理解，因为执行函数的时候就是事件监听被调用的时候嘛。但我想知道啥时候它会返回1和3，应该是不可能有定义1和3在哪里却从来用不上（不常用也算用的上！）的情况。

　　然后看到了陶士涵前辈的一篇博文，诶这不就能返回1和3了嘛！

　　下面是我测试用的代码（其实和陶士涵前辈的代码没啥区别，就我自己试试效果）：

 1 <button onclick="mouseEvent(event)">点我</button>
 2 <script type="text/JavaScript">
 3     document.body.addEventListener("click",function(event) {
 4         console.log("event.eventPhase的值：" + event.eventPhase);
 5     },true);/* 绑定在捕获阶段 */
 6     document.body.addEventListener("click",function(event) {
 7         console.log("event.eventPhase的值：" + event.eventPhase);
 8     },false);/* 绑定在冒泡阶段 */
 9     function mouseEvent(event) {
10         console.log("event.eventPhase的值：" + event.eventPhase);
11     }
12 </script>

　　点一下按钮，控制台的状态是这样的：

　　我用画图大概画了一下我的理解的流程：

　　（灵魂画师）

　　关于Event.eventPhase属性就先记录这些，我继续跟着这个教程看下去了，如果看到有相关的内容再在后面追加吧。

Event对象中的eventPhase属性

猜你喜欢