大家好，我是IT修真院成都分院第09期學(xué)員掰烟，一枚正直純潔善良的web程序員爽蝴。今天給大家分享一下，修真院官網(wǎng)js任務(wù)4纫骑，IE事件流和W3C事件流有什么區(qū)別蝎亚，參數(shù)分別是什么，以及如何阻止事件冒泡惧磺？
1.背景介紹
一颖对、事件流
事件，是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間磨隘。事件流缤底，描述的是頁面中接受事件的順序。IE9番捂，chrome个唧，F(xiàn)irefox，Opera设预，Safari均實現(xiàn)了DOM2級規(guī)范中定義的標準DOM事件徙歼，而IE8和IE8以下版本仍然保留專有的事件處理方式。
事件冒泡：
事件冒泡是由IE開發(fā)團隊提出來的，即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接收魄梯，然后逐級向上傳播桨螺。
點擊div，將先輸出“div”酿秸，再輸出“body”灭翔。
IE9，chrome辣苏，F(xiàn)irefox肝箱，Opera，Safari都支持事件冒泡稀蟋，并將事件冒泡到window對象煌张。
事件捕獲
事件捕獲是由Netscape Communicator團隊提出來的，是先由最上一級的節(jié)點先接收事件退客，然后向下傳播到具體的節(jié)點骏融。當用戶點擊了
元素，采用事件捕獲井辜，則click事件將按照
document—>html—>body—>div 的順序進行傳播绎谦。
若在div和body上都定義了click事件，如下：
點擊div粥脚，將先輸出“body”窃肠，再輸出“div”。
IE9刷允，chrome冤留，F(xiàn)irefox，Opera树灶，Safari都支持事件捕獲纤怒，但是IE8和IE8以下的版本只支持事件冒泡。盡管DOM2規(guī)范要求事件應(yīng)該從document對象開始傳播天通，但是現(xiàn)在的瀏覽器實現(xiàn)都是從window對象開始捕獲事件泊窘。
二.知識剖析
DOM事件流
"DOM2級事件”規(guī)定的事件流包含三個階段：
（1）事件捕獲階段，
（2）處于目標階段
（3）事件冒泡階段像寒。
首先發(fā)生的是事件捕獲烘豹，然后是實際的目標接收到事件，最后階段是冒泡階段诺祸。以上面為例携悯，單擊
元素將按照下圖觸發(fā)事件：
若在div和body上都定義了click事件，如下：
點擊div筷笨，將先輸出“event catch”憔鬼，再輸出“div”龟劲，最后輸出“event bubble”。
DOM2級事件處理程序
IE9轴或，chrome昌跌，F(xiàn)irefox，Opera照雁，Safari均實現(xiàn)了DOM2級事件處理程序避矢，綁定事件方法addEventListener()接收三個參數(shù)：事件名稱，事件處理函數(shù)和一個布爾值囊榜。布爾值為true，則表示在捕獲階段調(diào)用事件處理程序亥宿；如果為false卸勺，則表示在冒泡階段調(diào)用事件處理程序。
addEventListener允許在同一個元素上添加多個事件處理程序烫扼，如下所示：
先輸出“event bubble”曙求，后輸出“event catch”。
在目標對象上同時綁定捕獲階段/冒泡階段事件處理程序映企，觸發(fā)目標對象時屬于DOM事件流中的目標階段悟狱。目標階段事件的執(zhí)行順序：先注冊的先執(zhí)行，后注冊的后執(zhí)行堰氓。也就是說挤渐，在目標對象上綁定的函數(shù)是采用捕獲，還是采用冒泡双絮，都沒有什么關(guān)系浴麻，因為冒泡和捕獲只是對父元素上的函數(shù)執(zhí)行順序有影響，對自己沒有什么影響囤攀。
刪除DOM2級事件處理程序软免，采用removeEventListener()，刪除時傳入的參數(shù)必須和綁定時傳入的參數(shù)相同焚挠，不能傳入匿名函數(shù)膏萧。如下所示：
總結(jié)：
先按由上往下的順序執(zhí)行事件捕獲的執(zhí)行程序，再執(zhí)行目標元素的執(zhí)行程序蝌衔，最后按由下往上的順序執(zhí)行冒泡事件榛泛。代碼如下所示：
輸出順序：body:event catch—>parent:event catch—>child—>parent:event bubble—>body:event bubble
三.常見問題
阻止事件冒泡和捕獲
四.解決方案
默認情況下，多個事件處理函數(shù)會按照DOM事件流模型中的順序執(zhí)行胚委。如果子元素上發(fā)生某個事件挟鸠，不需要執(zhí)行父元素上注冊的事件處理函數(shù)，那么我們可以停止捕獲和冒泡亩冬，避免沒有意義的函數(shù)調(diào)用艘希。IE8以及以前可以通過 window.event.cancelBubble=true阻止事件的繼續(xù)傳播硼身；IE9+/FF/Chrome通過event.stopPropagation()阻止事件的繼續(xù)傳播。
當點擊outC的時候覆享，之后打印出capture-->target佳遂，不會打印出bubble。因為當事件傳播到outC上的處理函數(shù)時撒顿，通過stopPropagation阻止了事件的繼續(xù)傳播丑罪，所以不會繼續(xù)傳播到冒泡階段。
執(zhí)行結(jié)果是只打印capture凤壁，不會打印target和bubble吩屹。雖然點擊了outC，但是卻沒有觸發(fā)outC上的事件處理函數(shù)拧抖，而是觸發(fā)了outA上的事件處理函數(shù)煤搜。
五.編碼實戰(zhàn)
六.擴展思考
如何做到事件委托？
7.參考文獻
參考2：js之事件冒泡和事件捕獲詳細介紹
8 更多討論
鳴謝
感謝 郭婷婷 師姐唧席，此教程是在他們之前技術(shù)分享的基礎(chǔ)上完善而成
感謝大家觀看
今天的分享就到這里啦擦盾，歡迎大家點贊、轉(zhuǎn)發(fā)淌哟、留言迹卢、拍磚~
我們下周再見！
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師徒仓，現(xiàn)在開始腐碱，找個師兄，帶你入門蓬衡，掌控自己學(xué)習(xí)的節(jié)奏喻杈，學(xué)習(xí)的路上不再迷茫”狰晚。
這里是技能樹.IT修真院筒饰，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化壁晒，成長可見化瓷们，師兄1對1免費指導(dǎo)∶敫溃快來與我一起學(xué)習(xí)吧~
