Posted on 2008-12-21 09:57
魚躍于淵 閱讀(223)
評論(0) 編輯 收藏 所屬分類:
javascript相關(guān)
說到 addEventListener 不得不說到事件流，先說事件流對后面的解釋比較方便。
當(dāng)一個事件發(fā)生時，分為三個階段：
捕獲階段 從根節(jié)點(diǎn)開始順序而下，檢測每個節(jié)點(diǎn)是否注冊了事件處理程序。如果注冊了事件處理程序，并且 useCapture 為 true，則調(diào)用該事件處理程序。（IE 中無此階段。）
目標(biāo)階段 觸發(fā)在目標(biāo)對象本身注冊的事件處理程序，也稱正常事件派發(fā)階段。
冒泡階段 從目標(biāo)節(jié)點(diǎn)到根節(jié)點(diǎn)，檢測每個節(jié)點(diǎn)是否注冊了事件處理程序，如果注冊了事件處理程序，并且 useCapture 為 false，則調(diào)用該事件處理程序。
舉例
1 <div id="div1">
2 <div id="div2">
3 <div id="div3">
4 <div id="div4">
5 </div>
6 </div>
7 </div>
8 </div>
如果在 d3 上點(diǎn)擊鼠標(biāo)，事件流是這樣的：
捕獲階段 在 div1 處檢測是否有 useCapture 為 true 的事件處理程序，若有，則執(zhí)行該程序，然后再同樣地處理 div2。
目標(biāo)階段 在 div3 處，發(fā)現(xiàn) div3 就是鼠標(biāo)點(diǎn)擊的節(jié)點(diǎn)，所以這里為目標(biāo)階段，若有事件處理程序，則執(zhí)行該程序，這里不論 useCapture 為 true 還是 false。
冒泡階段 在 div2 處檢測是否有 useCapture 為 false 的事件處理程序，若有，則執(zhí)行該程序，然后再同樣地處理 div1。
注意，上述捕獲階段和冒泡階段中，實際上 div1 之上還應(yīng)該有結(jié)點(diǎn)，比如有 body，但這里不討論。