之前總是單純的記得事件冒泡和事件捕獲相反，一個從下至上，另一個從上至下，但是卻沒有弄明白他們的執行順序，導致昨晚筆試CVTE出了類似這么一道題不會做。
對於DOM和DOM2級事件這兩個區別就不詳細解釋了，網上大把資料。
這里僅針對該題目進行事件捕獲和事件冒泡順序進行理解。
首先要明白DOM2級事件規定的事件流包含3個階段，事件捕獲階段、處於目標階段、事件冒泡階段。
下面貼題目代碼（僅核心部分）進行詳細解釋，首先
addEventListener方法有三個參數，分別是事件監聽類型，事件執行函數和是否進行事件捕獲，默認值為false，即不進行事件捕獲（那自然就是事件冒泡了）。
問題來了，點擊a1元素，控制台如何輸出，我們來按照DOM2級事件規定的事件流進行分析一下即可得出答案
<body> <div id="dog"> dog <div id="a1"> a1 </div> </div> <script> window.onload = function() { let dog = document.getElementById('dog') let a1 = document.getElementById('a1') a1.addEventListener('click', () => console.log('a1'), true)// a1新增一個事件捕獲 a1.addEventListener('click', () => console.log('a1 12'), false)// a1新增一個事件冒泡 dog.addEventListener('click', () => console.log('dog12'), false)// dog新增一個事件冒泡 dog.addEventListener('click', () => console.log('dog'), true)// dog新增一個事件捕獲 } </script> </body>
這里貼一下流程圖，大家肯定能理解了
沒錯，最后控制台輸出如下
，
先執行捕獲再執行冒泡