1.背景介紹
瀏覽器的事件發生順序
瀏覽器的事件發生順序分為事件冒泡與事件捕獲，分別由微軟和網景公司提出。
事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會一直從水底冒出水面。也就是說，事件會從最內層的元素開始發生，一直向上傳播，直到document對象。
因此在事件冒泡的概念下在p元素上發生click事件的順序應該是p -> div -> body -> html -> document
事件捕獲會從最外層開始發生，直到最具體的元素。
因此在事件捕獲的概念下在p元素上發生click事件的順序應該是document -> html -> body -> div -> p
網景 和 微軟 曾經的戰爭還是比較火熱的，當時， 網景主張捕獲方式，微軟主張冒泡方式。后來 w3c 采用折中的方式，平息了戰火，制定了統一的標准——先捕獲再冒泡。
默認行為
瀏覽器的一些默認的行為。例如：點擊超鏈接跳轉，點擊右鍵會彈出菜單，滑動滾輪控制滾動條
2.知識剖析
如何切換事件冒泡與事件捕獲
使用addEventListener方法，其第三個參數可選擇事件的發生順序
element.addEventListener(event, function, useCapture)
第三個參數默認值是false，表示在事件冒泡階段調用事件處理函數;如果參數為true，則表示在事件捕獲階段調用處理函數。
3.常見問題
如何阻止事件冒泡和默認事件?
4.解決方案
阻止事件冒泡
DOM中提供stopPropagation()方法，但IE不支持，使用event對象在事件函數中調用就行.
IE中提供的是，cancelBubble屬性，默認為false，當它設置為true時，就是阻止事件冒泡，也是用event對象在事件函數中調用.
jQuery中提供了stopPropagation()方法來停止事件冒泡，當需要時，只需用用event對象來調用就行，即event.stopPropagation();
阻止默認行為
DOM中提供preventDefault()方法來取消事件默認行為，但是只有當cancelable屬性設置為true的事件，才可以使用preventDefault()來取消事件默認行為，使用event對象在事件函數中調用就行。
IE中提供的是returnValue屬性，默認為true，當它設置為false時，就是取消事件默認行為，也是用event對象在事件函數中調用。
jQuery中提供了preventDefault()方法來阻止元素的默認行為，只需要用event對象來調用就好，即event.preventDefault()
對於a鏈接，可以使用javascript偽協議來阻止默認行為
5.編碼實戰
DEMO
6.擴展思考
冒泡和捕獲同時存在時事件的觸發順序？
這里記被點擊的DOM節點為target節點
1.對於非target節點則先執行捕獲在執行冒泡
2.對於target節點則是先執行先注冊的事件，無論冒泡還是捕獲
7.參考文獻
<a href="https://segmentfault.com/a/1190000004484445">JS中的事件綁定，事件捕獲，事件冒泡以及事件委托，兼容IE</a>
<a href="https://segmentfault.com/a/1190000005654451">JS中事件冒泡與捕獲</a>
8.更多討論
事件冒泡有什么作用
事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可以讓你在對象層的不同級別捕獲事件。讓不同的對象同時捕獲同一事件，並調用自己的專屬處理程序做自己的事情
PPT
視頻
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，學習的路上不再迷茫。
這里是技能樹.IT修真院：http://www.jnshu.com，初學者轉行到互聯網行業的聚集地。"
歡迎加IT交流群565734203與大家一起討論交流