大家好，我是IT修真院北京分院第23期的學員郭婷婷，一枚正直純潔善良的WEB前端程序員。
今天給大家分享一下，修真院官網js任務4中涉及的IE事件流和W3C事件流有什么區別，參數分別是什么，以及如何阻止事件冒泡？
小課堂【北京第225期】
分享人：郭婷婷
1.背景介紹
事件
JavaScript與HTML之間的交互是通過事件實現的。事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。 它是用戶或瀏覽器自身執行的某種動作，如click,load和mouseover都是事件的名字。
事件是javaScript和DOM之間交互的橋梁。
你若觸發，我便執行——事件發生，調用它的處理函數執行相應的JavaScript代碼給出響應。 典型的例子有：頁面加載完畢觸發load事件；用戶單擊元素，觸發click事件。
事件流
事件流描述的是從頁面中接收事件的順序。
當瀏覽器發展到第四代時(IE4及Netscape4)，瀏覽器開發團隊遇到了一個很有意思的問題：頁面的哪一部分會擁有某個特定的事件？ 可以想象畫在一張紙上的一組同心圓。如果你把手指放在圓心上，那么你的手指指向的不是同一個圓，而是紙上的所有圓。
IE和網景兩家公司的瀏覽器開發團隊在看待瀏覽器事件方面還是一致的。如果單擊了某個按鈕，他們都認為單擊事件不僅僅發生在按鈕上。 在單擊按鈕的同時，也單擊了按鈕的容器元素，甚至也單擊了整個頁面。
IE提出的是冒泡流,而網景提出的是捕獲流,后來在W3C組織的統一之下,JS支持了冒泡流和捕獲流, 但是目前低版本的IE瀏覽器還是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流),所以為了能夠兼容更多的瀏覽器,建議大家使用冒泡流。
2.知識剖析
事件冒泡
IE的事件流叫做事件冒泡（event bubbling），即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收， 然后逐級向上傳播到較為不具體的節點（文檔）。也就是子級元素先觸發，父級元素后觸發。
事件捕獲
網景團隊提出的另一種事件流叫事件捕獲（event capturing)。 事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件。 也就是父級元素先觸發，子級元素后觸發。
DOM事件流
DOM標準采用捕獲+冒泡。兩種事件流都會觸發DOM的所有對象，從document對象開始，也在document對象結束。
DOM標準規定事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。
事件捕獲階段：實際目標div在捕獲階段不會接收事件。也就是在捕獲階段，事件從document到html再到body就停止了。(圖中為1~3.)
處于目標階段：事件在div上發生并處理。但是事件處理會被看成是冒泡階段的一部分。
冒泡階段：事件又傳播回文檔。
可以自己選擇綁定事件時采用事件捕獲還是事件冒泡，方法就是綁定事件時通過addEventListener函數， 它有三個參數，第三個參數若是true，則表示采用事件捕獲，若是false，則表示采用事件冒泡。
element.addEventListener(event,function,useCapture)
event:字符串，指定事件名。（不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。）
function:指定要事件觸發時執行的函數。
useCapture:可選。布爾值，指定事件是否在捕獲或冒泡階段執行。(true - 事件句柄在捕獲階段執行;false- false- 默認。事件句柄在冒泡階段執行)
IE只支持事件冒泡，不支持事件捕獲，它也不支持addEventListener函數，不會用第三個參數來表示是冒泡還是捕獲，它提供了另一個函數attachEvent。
element.attachEvent("onclick", doSomething2);
3.常見問題
如何阻止事件冒泡？
4 解決方案
事件的傳播是可以阻止的：
? 在W3c中，使用event.stopPropagation()方法
? 在IE下設置event.cancelBubble = true；
5.編碼實戰
6.擴展思考
事件委托
事件委托呢？它還有一個名字叫事件代理，JavaScript高級程序設計上講：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。 通俗地來講，就是把一個元素響應事件（click、keydown......）的函數委托到另一個元素；一般來講，會把一個或者一組元素的事件委托到它的父層或者更外層元素上， 真正綁定事件的是外層元素，當事件響應到需要綁定的元素上時，會通過事件冒泡機制從而觸發它的外層元素的綁定事件上，然后在外層元素上去執行函數。
有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委托給前臺MM代為簽收。現實當中，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞）。 前臺MM收到快遞后，她會判斷收件人是誰，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個優勢，那就是即使公司里來了新員工（不管多少），前臺MM也會在收到寄給新員工的快遞后核實并代為簽收。 這里其實還有2層意思的： 第一，現在委托前臺的同事是可以代為簽收的，即程序中的現有的dom節點是有事件的； 第二，新員工也是可以被前臺MM代為簽收的，即程序中新添加的dom節點也是有事件的。
一般來說，dom需要有事件處理程序，我們都會直接給它設事件處理程序就好了，那如果是很多的dom需要添加事件處理呢？比如我們有100個li，每個li都有相同的click點擊事件，可能我們會用for循環的方法，來遍歷所有的li，然后給它們添加事件，那這么做會存在什么影響呢？ 在JavaScript中，添加到頁面上的事件處理程序數量將直接關系到頁面的整體運行性能，因為需要不斷的與dom節點進行交互，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間，這就是為什么性能優化的主要思想之一就是減少DOM操作的原因；如果要用事件委托，就會將所有的操作放到js程序里面，與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數，提高性能； 每個函數都是一個對象，是對象就會占用內存，對象越多，內存占用率就越大，自然性能就越差了，比如上面的100個li，就要占用100個內存空間，如果是1000個，10000個呢，如果用事件委托，那么我們就可以只對它的父級（如果只有一個父級）這一個對象進行操作，這樣我們就需要一個內存空間就夠了，自然性能就會更好。
7.參考文獻
參考2：js之事件冒泡和事件捕獲詳細介紹
參考2：js中的事件委托或是事件代理詳解
8 更多討論
鳴謝
感謝大家觀看
BY : 郭婷婷
PPT鏈接：https://ptteng.github.io/PPT/PPT/js-04-event-flow.html
視頻鏈接：https://pan.baidu.com/s/1qYc9n1y? 密碼: ctxs
--------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧?！
