Event對象中的eventPhase屬性
阿新 • • 發佈：2019-02-13
資料 tlist click ati html tex 變化 設計 運行
參考資料：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屬性