1.背景介紹
瀏覽器的事件發(fā)生順序
瀏覽器的事件發(fā)生順序分為事件冒泡與事件捕獲，分別由微軟和網(wǎng)景公司提出式曲。
事件冒泡可以形象地比喻為把一顆石頭投入水中妨托，泡泡會(huì)一直從水底冒出水面缸榛。也就是說，事件會(huì)從最內(nèi)層的元素開始發(fā)生兰伤，一直向上傳播内颗，直到document對象。
因此在事件冒泡的概念下在p元素上發(fā)生click事件的順序應(yīng)該是p -> div -> body -> html -> document
事件捕獲會(huì)從最外層開始發(fā)生敦腔，直到最具體的元素均澳。
因此在事件捕獲的概念下在p元素上發(fā)生click事件的順序應(yīng)該是document -> html -> body -> div -> p
網(wǎng)景 和 微軟 曾經(jīng)的戰(zhàn)爭還是比較火熱的，當(dāng)時(shí)符衔， 網(wǎng)景主張捕獲方式找前，微軟主張冒泡方式。后來 w3c 采用折中的方式判族，平息了戰(zhàn)火躺盛，制定了統(tǒng)一的標(biāo)準(zhǔn)——先捕獲再冒泡。
默認(rèn)行為
瀏覽器的一些默認(rèn)的行為形帮。例如：點(diǎn)擊超鏈接跳轉(zhuǎn)槽惫，點(diǎn)擊右鍵會(huì)彈出菜單，滑動(dòng)滾輪控制滾動(dòng)條
2.知識剖析
如何切換事件冒泡與事件捕獲
使用addEventListener方法辩撑，其第三個(gè)參數(shù)可選擇事件的發(fā)生順序
element.addEventListener(event, function, useCapture)
第三個(gè)參數(shù)默認(rèn)值是false界斜，表示在事件冒泡階段調(diào)用事件處理函數(shù);如果參數(shù)為true，則表示在事件捕獲階段調(diào)用處理函數(shù)槐臀。
3.常見問題
如何阻止事件冒泡和默認(rèn)事件?
4.解決方案
阻止事件冒泡
DOM中提供stopPropagation()方法锄蹂，但I(xiàn)E不支持，使用event對象在事件函數(shù)中調(diào)用就行.
?
IE中提供的是水慨，cancelBubble屬性得糜，默認(rèn)為false，當(dāng)它設(shè)置為true時(shí)晰洒，就是阻止事件冒泡朝抖，也是用event對象在事件函數(shù)中調(diào)用.
?
jQuery中提供了stopPropagation()方法來停止事件冒泡，當(dāng)需要時(shí)谍珊，只需用用event對象來調(diào)用就行治宣，即event.stopPropagation();
阻止默認(rèn)行為
DOM中提供preventDefault()方法來取消事件默認(rèn)行為，但是只有當(dāng)cancelable屬性設(shè)置為true的事件砌滞，才可以使用preventDefault()來取消事件默認(rèn)行為侮邀，使用event對象在事件函數(shù)中調(diào)用就行。
?
IE中提供的是returnValue屬性贝润，默認(rèn)為true绊茧，當(dāng)它設(shè)置為false時(shí)，就是取消事件默認(rèn)行為打掘，也是用event對象在事件函數(shù)中調(diào)用华畏。
?
jQuery中提供了preventDefault()方法來阻止元素的默認(rèn)行為鹏秋，只需要用event對象來調(diào)用就好，即event.preventDefault()
對于a鏈接亡笑，可以使用javascript偽協(xié)議來阻止默認(rèn)行為
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
冒泡和捕獲同時(shí)存在時(shí)事件的觸發(fā)順序侣夷？
這里記被點(diǎn)擊的DOM節(jié)點(diǎn)為target節(jié)點(diǎn)
1.對于非target節(jié)點(diǎn)則先執(zhí)行捕獲在執(zhí)行冒泡
2.對于target節(jié)點(diǎn)則是先執(zhí)行先注冊的事件，無論冒泡還是捕獲
7.參考文獻(xiàn)
<a >JS中的事件綁定仑乌，事件捕獲百拓，事件冒泡以及事件委托，兼容IE</a>
<a >JS中事件冒泡與捕獲</a>
8.更多討論
事件冒泡有什么作用
事件冒泡允許多個(gè)操作被集中處理（把事件處理器添加到一個(gè)父級元素上绝骚，避免把事件處理器添加到多個(gè)子級元素上）耐版，它還可以讓你在對象層的不同級別捕獲事件祠够。讓不同的對象同時(shí)捕獲同一事件压汪，并調(diào)用自己的專屬處理程序做自己的事情
