js中監聽事件addEventListener第三個參數的理解（事件的冒泡與捕獲）

js中，可以給一個dom對象添加監聽事件，像下面這樣：

domElement.addEventListener("click", function(){}, true);

第一個參數是事件類型，比如點擊(click)、雙擊(dbclick)

第二個參數就是函數，觸發事件後，需要執行的函數。

而第三個參數就是事件的捕獲與冒泡， 為true時捕獲，false時冒泡。

​

三個參數介紹完了，第三個參數怎麼理解，看下面

這裏有三個疊放在一起的div，並且三個div都綁定了click事件

function div1SayHello() {
  console.log('hello, i am div1');
}
function div2SayHello() {
  console.log('hello, i am div2');
}
function div3SayHello() {
  console.log('hello, i am div3');
}
// 第三個參數為true，則為捕獲
document.getElementById('div1').addEventListener('click', div1SayHello, true)
document.getElementById('div2').addEventListener('click', div2SayHello, true)
document.getElementById('div3').addEventListener('click', div3SayHello, true)

​

那麼，由於事件穿透，我點擊div3，也相當於點擊了div1和div2，那麼，事件觸發順序是什麼呢？

也就是説，誰先sayHello

而這就跟監聽事件的第三個參數有關係了，也就是事件的冒泡和捕獲。

冒泡：從dom樹的最下面往上面一層層的執行事件， sayHello的順序是 div3、div2、div1。

捕獲：從dom樹的最上面往下面一層層的執行事件， sayHello的順序是 div1、div2、div3。

可以給三個事件的第三個參數隨便設置true或false，根據結果就能更好的理解這兩個概念了。