Posted on 2008-12-21 09:57
魚(yú)躍于淵 閱讀(223)
評(píng)論(0) 編輯 收藏 所屬分類:
javascript相關(guān)
說(shuō)到 addEventListener 不得不說(shuō)到事件流，先說(shuō)事件流對(duì)后面的解釋比較方便。
當(dāng)一個(gè)事件發(fā)生時(shí)，分為三個(gè)階段：
捕獲階段 從根節(jié)點(diǎn)開(kāi)始順序而下，檢測(cè)每個(gè)節(jié)點(diǎn)是否注冊(cè)了事件處理程序。如果注冊(cè)了事件處理程序，并且 useCapture 為 true，則調(diào)用該事件處理程序。（IE 中無(wú)此階段。）
目標(biāo)階段 觸發(fā)在目標(biāo)對(duì)象本身注冊(cè)的事件處理程序，也稱正常事件派發(fā)階段。
冒泡階段 從目標(biāo)節(jié)點(diǎn)到根節(jié)點(diǎn)，檢測(cè)每個(gè)節(jié)點(diǎn)是否注冊(cè)了事件處理程序，如果注冊(cè)了事件處理程序，并且 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 處檢測(cè)是否有 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 處檢測(cè)是否有 useCapture 為 false 的事件處理程序，若有，則執(zhí)行該程序，然后再同樣地處理 div1。
注意，上述捕獲階段和冒泡階段中，實(shí)際上 div1 之上還應(yīng)該有結(jié)點(diǎn)，比如有 body，但這里不討論。