前幾天做到阿里的前端面試題，其中的一道選擇題考查的知識點就是事件的傳播，當時做題的時候不確定答案所以決定總結下這方面的知識點。
首先事件傳播分為三個階段：
第一階段：發生在目標處理程式呼叫之前，稱為捕獲階段；
第二階段：目標物件本身的事件處理程式呼叫；
第三階段：發生在目標處理程式呼叫之後，稱為冒泡階段；
回顧歷史：兩種模型
早期在事件處理順序上netscape和微軟有兩種截然不同不處理方法：
捕獲型：netscape主張事件從最外層開始發生，然後一直向上傳播
冒泡型：微軟主張事件從目標元素開始發生，然後一直向上傳播
後來w3c制定標準規定：任何發生在w3c事件模型中的事件，首是進入捕獲階段，直到達到目標元素，再進入冒泡階段
事件繫結
程式設計師可以自己選擇繫結事件時採用事件捕獲還是事件冒泡，方法就是繫結事件時通過addeventlistener函式，它有三個引數，第三個引數若是true，則表示採用事件捕獲，若是false，則表示採用事件冒泡。
不過ie9之前的ie不支援addeventlistener()和removeeventlistener(),ie5之後的版本定義了類似的方法attachevent()和detachevent()，但是兩者的有如下區別：
1.因為ie事件模型不支援事件捕獲，所以attachevent()和detachevent()要求只有兩個引數：事件型別和處理程式函式。
2.ie方法的第乙個引數使用了帶"on"字首的事件處理程式屬性名。
3attachevent()允許相同的事件處理程式函式註冊多次，當特定的事件發生時，註冊函式的呼叫次數和註冊次數一樣。
click
var parent = document.getelementbyid("parent");
var child = document.getelementbyid("child");
parent.addeventlistener("click", function(event), true)//表示parent上面的click事件會在事件捕獲的時候處理程式
child.addeventlistener("click", function(event));
注意：發生在文件元素上的大部分事件都會冒泡，但是focus blur scroll事件除外。
文件元素上的load事件會冒泡，但它會在document物件上停止冒泡而不會傳播到window物件，只有當整個文件都載入完畢時才會觸發window物件load事件。
傳統的事件繫結：
在乙個支援w3c dom的瀏覽器中，像這樣一般的繫結事件方式，是採用的事件冒泡方式
elem.onclick = dosomething
取消事件預設操作
通過物件屬性或者html屬性註冊的事件處理程式通過返回false取消事件的瀏覽器預設操作（ie9以上也可以通過呼叫event.preventdefault()）。
通過addeventlistener()註冊的事件，必須通過呼叫事件物件的preventdefault()方法取消事件的預設操作。
通過attachevent()註冊的事件，只能通過設定事件物件的returnvalue屬性為false來取消事件的預設操作。
取消事件傳播
在支援事件addeventlistener()的瀏覽器中可以呼叫時間物件的stoppropagation()方法可以阻止事件傳播，該方法可以在事件傳播期間的任何時間呼叫，目標物件上的處理程式依舊被呼叫，dan'shi
ie9之前由於沒有事件捕獲所以冒泡是唯一的事件傳播，設定事件物件的cancelbubble屬性為true
還有乙個stopimmediatepropagation()和stoppropagation()相似，區別是它會阻止當前物件上相同事件註冊程式呼叫，stoppropagation方法不會阻止當前元素上的相同事件註冊的其他程式。比如：
parent.addeventlistener("click", function(event), true)
parent.addeventlistener("click", function(event), true)
child.addeventlistener("click", function(event));
注意：區分取消事件預設行為和取消事件傳播的區別
深入理解事件捕獲冒泡
看到乙個的日誌，發現自己對事件冒泡捕獲並沒有完全理解透。借用一下這個例子和大家 一下 假設有指令碼片段如下 document.body.addeventlistener mousedown function e false document.body.addevnetlistener mousedo...
事件冒泡和事件捕捉
事件流 ie的事件流 冒泡 dom標準事件流 先捕獲在冒泡，從document開始 瀏覽器的捕獲從window開始 事件冒泡 事件冒泡是自下而上的去觸發事件。事件捕捉 自上而下的去觸發事件。繫結事件方法的第三個引數，可控制事件觸發順序是否為事件捕獲。true,事件捕獲 false,事件冒泡。預設fa...
js事件冒泡和事件捕捉
結論 他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。繫結事件方法的第三個引數，就是控制事件觸發順序是否為事件捕獲。true,事件捕獲 false,事件冒泡。預設false,即事件冒泡。jquer...