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

時間 2021-05-26

標籤 dom 函數 spa code 對象事件圖片 rem get 欄目 JavaScript 简体版

原文原文鏈接

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

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

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

第一個參數是事件類型，好比點擊(click)、雙擊(dbclick)
第二個參數就是函數，觸發事件後，須要執行的函數。函數

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

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

這裏有三個疊放在一塊兒的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圖片

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

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

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

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