Mozilla瀏覽器提供了一個JavaScript的綁定事件監(jiān)聽器的函數(shù)addEventListener
document.getElementById("button1").addEventListener("click",callback,isCapture);
其中各個參數(shù)說明如下：
- "click" 代表注冊的什么事件亏镰∽缑茫“click”代表的自然是點擊事件，注意前面不加“on”前綴宿接。也可以是其他事件嚼蚀，去掉“on”前綴即可。
- callback 回調(diào)函數(shù)谤绳，當(dāng)事件被觸發(fā)時調(diào)用該函數(shù)。
- isCapture 是否在捕獲階段執(zhí)行回調(diào)袒哥。默認(rèn)為false缩筛。
下面來說一下第三個參數(shù) isCapture。它是一個boolean類型的值堡称。說到它就不得不提一下JavaScript中的事件觸發(fā)經(jīng)歷的兩個階段：捕獲階段和冒泡階段瞎抛。
從圖中可見都是嵌套關(guān)系。我們假定點擊了最內(nèi)層的text元素却紧，觸發(fā)了它的onclick事件婿失。
但是實際上因為是嵌套的原因，點擊了最內(nèi)層的text也相當(dāng)于點擊了它的父元素div啄寡，也相當(dāng)于點擊了父元素的父元素body……也相當(dāng)于點擊了window，那么如果這些外層元素也有onclick的點擊事件哩照，它們也應(yīng)當(dāng)被觸發(fā)挺物，現(xiàn)在的問題是，是在什么時候被觸發(fā)飘弧？
圖中可見有兩個階段
- 先從最外面開始（也就是window開始）向內(nèi)推進(jìn)识藤，直到定位到觸發(fā)的元素text砚著。這一過程叫“捕獲過程”。
- 然后從該元素開始痴昧，又向上級冒泡稽穆。該過程為“冒泡過程”。
顯然赶撰，對于這個嵌套鏈上的每個元素舌镶，它的觸發(fā)按數(shù)即可以在捕獲階段被執(zhí)行，也可以在冒泡階段被執(zhí)行豪娜。
所以餐胀，addEventListener的第三個參數(shù)正是指定這個觸發(fā)時段的。默認(rèn)情況是false瘤载，也就是在冒泡階段被執(zhí)行否灾；如果指派為true，則在捕獲階段被執(zhí)行鸣奔。
用一個簡單的實驗可以說明問題：
假設(shè)現(xiàn)在一個HTML界面有三個呈嵌套關(guān)系的元素
<div id="outer" >
<div id="middle" >
<input type="button" id="inner" value="inner"/>
</div>
</div>
最外層是outer墨技，中間是middle，內(nèi)部是inner挎狸。
下面是三個元素綁定點擊事件：
window.onload=function(){
document.getElementById("inner").addEventListener("click",show("inner"),false);
document.getElementById("middle").addEventListener("click",show("middle"),false);
document.getElementById("outer").addEventListener("click",show("outer"),false);
}
function show(i){
return function(){
console.log(i);
}
}
點擊對應(yīng)元素扣汪，就會在控制臺打印出相應(yīng)信息。下面分別修改三個boolean參數(shù)伟叛，觀察輸出結(jié)果
OUTPUT的結(jié)果左邊先打印私痹，右邊后打印。我們舉兩個結(jié)果說明：
- isCapture分別被設(shè)置為TFF的時候统刮，點擊最內(nèi)層inner的按鈕紊遵，由于outer、middle設(shè)置的為false侥蒙，那么它們在捕獲階段不會被觸發(fā)暗膜，控制流到達(dá)inner，此時先輸出inner鞭衩，然后開始返回学搜，也就是向上級冒泡，所以依次觸發(fā)middle论衍、outer瑞佩。
- isCapture分別被設(shè)置為TTF的時候，點擊最內(nèi)層inner按鈕坯台，由于outer設(shè)置為false炬丸，那么它在進(jìn)入的階段不會被觸發(fā)，但是當(dāng)遇到middle時候蜒蕾，因為是true稠炬，所以會被觸發(fā)焕阿，先輸出middle，然后輸出inner首启，最后在返回的冒泡階段暮屡，outer被觸發(fā)，最后輸出outer毅桃。
