js中addEventListener第三個參數涉及到的事件捕獲與冒泡

標籤：ntb   事件   onkeydown   key   alt   cti   順序   on()   click   

js中，我們可以給一個dom對象添加監聽事件，函數就是

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

很容易理解，第一個參數是事件類型，比如點擊(click)、觸摸(touchstart)，

第二個參數就是事件函數，

比如我給一個button添加alert函數。

window.onload=function(){
document.getElementById("hello").addEventListener("onkeydown",function () {
alert("hello");
});
}

那麼第三個參數是什麼呢？這個參數設計到事件的捕獲與冒泡，為true時捕獲，false時冒泡。

什麼意思呢？

我舉個簡單的例子，我有兩個div和一個button，button在div2裡面，div2在div1裡面。如所示

 

給button、div1、div2、都添加了click事件，分別alert button、div1、div2。

window.onload=function(){
document.getElementById("btn").addEventListener("click",function () {
// body...
alert("hello");
});
document.getElementById("div1").addEventListener("click",function(){
alert("div1");
});
document.getElementById("div2").addEventListener("click",function(){
alert("div2");
});
}

那麼問題就來了，我點擊button，也相當於點擊了div1和div2，那麼，誰先出現呢？

直觀的講，誰在上面，誰在下面。

所以，在js中就分為了兩個處理方法，冒泡和捕獲。

冒泡：從裡面往外面觸發事件，就是alert的順序是 button、div2、div1。

捕獲：從外面往裡面觸發事件，就是alert的順序是div1、div2、button。

要想冒泡，就要將每個監聽事件的第三個參數設定為false,也就是預設的值。

要想捕獲，就要將每個監聽事件的第三個參數設定為true。

好了，就講這麼多了。為了更好的理解冒泡和捕獲，大家可以給三個事件的第三個參數隨便設定，就是說不同時設定為true或false,

給button為true，div1為false等等，根據結果就能更好的理解這兩個概念了。

 

js中addEventListener第三個參數涉及到的事件捕獲與冒泡