昨天有個面試官問我的問題，他直接問我兩個div巢狀，都有click事件，單擊的時候先彈出子div還是父div。完全不知所以然。
過後經過查詢資料後，很是慚愧。原來他問的就是關於js捕獲和冒泡的。
我查詢了一些資料：
事件捕獲(父--》 子)
當你使用事件捕獲時，父級元素先觸發，子級元素後觸發，即div先觸發，p後觸發。
事件冒泡(子--》 父)
當你使用事件冒泡時，子級元素先觸發，父級元素後觸發，即p先觸發，div後觸發。
w3c模型
w3c模型是將兩者進行中和，在w3c模型中，任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。然後，再從事件源往上進行事件冒泡，直到到達document。
那麼程式設計師能不能自己選擇觸發哪種事件呢？當然可以。
程式設計師可以自己選擇繫結事件時採用事件捕獲還是事件冒泡，方法就是繫結事件時通過addeventlistener函式，它有三個引數，第三個引數若是true，則表示採用事件捕獲，若是false，則表示採用事件冒泡。
ele.addeventlistener('click',dosomething2,true)
true=捕獲
false=冒泡
傳統繫結事件方式
在乙個支援w3c dom的瀏覽器中，像這樣一般的繫結事件方式，是採用的事件冒泡方式。
ele.onclick = dosomething2
但是ie瀏覽器不支援這個addeventlistener、也沒有三個引數、也不支援事件捕獲。但是ie也有乙個函式，attachevent
ele.attachevent("onclick", dosomething2);
附：事件冒泡（的過程）：事件從發生的目標（event.srcelement||event.target）開始，沿著文件逐層向上冒泡，到document為止。
下邊的內容是從其他部落格摘過來的，可以借鑑
做個小測試。感受一下冒泡事件。
js 事件冒泡和事件捕獲
1 冒泡型事件 事件按照從最特定的事件目標到最不特定的事件目標 document物件 的順序觸發。ie 5.5 div body document ie 6.0 div body html document mozilla 1.0 div body html document window 2 捕獲...
Js冒泡事件和捕獲事件
js中冒泡事件和捕獲事件 冒泡事件 冒泡事件是從裡向外，即是從被繫結元素開始一直向外到達頁面的所有祖先元素都會被觸發，這 一過程被稱為事件冒泡。這個事件從原始元素開始一直冒泡到dom樹的最上層 捕獲事件 捕獲事件是從頁面的最上層到被繫結元素都會觸發。ie只支援事件冒泡，不支援事件捕獲 冒泡事件和捕獲...
js之事件冒泡和事件捕獲
1，ie只冒泡，w3c先捕獲再冒泡 事件的傳播過程 事件捕捉 目的節點 冒泡事件，下面的 體現了事件的冒泡過程，某一節點定義了onclick事件，該事件會從當前的節點往上到父節點一直到document節點，在冒泡的過程中，如果父節點同樣定義了該事件控制代碼，就會同樣呼叫該控制代碼，這也是事件 的原理...