js中,我們可以給一個dom對象添加監聽事件,函數就是 addEventListener("click",function(){},true); 很容易理解,第一個參數是事件類型,比如點擊(click)、觸摸(touchstart), 第二個參數就是事件函數, 比如我給一個button添加alert ...
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等等,根據結果就能更好的理解這兩個概念了。