事件捕獲和事件冒泡涉及到了事件的流程，我們先來看一個例子：
一、 添加事件監聽：給 window 添加點選的監聽事件，輸出 “别點了，受不了了“
< script > function say (){ console . log ( "别點了，受不了了！" ); } window. addEventListener ( "click" , say ，false ); < / script >
二、上面我們已經知道如何添加監聽，下面看一個例子，然後分析事件的流程：
事件流程的簡單描述：
當我們給一個元素添加監聽的時候，例如點選事件；
首先這個事件進入的是捕獲階段，也就是從外層向内層探索，例如下面的三個div嵌套的例子，
先找到到一個div，然後檢視有沒有綁定的事件，如果有，那麼就執行相應的處理函數，如果
沒有相應的事件或者事件執行完成，那麼繼續向裡面的第二個div探索，如果第二個div有綁定
的事件，那麼執行，如果沒有，或者事件執行完成，繼續向第三個div探索；
目标階段，假設我們點選的是第三個div，那麼到達這個div然後執行相應的處理就是我們本來
應該做的事情， 也就是我們的目标；
冒泡階段，假設我們的目标階段執行完成，那麼從第三個div依次到達第一個div，就是冒泡階段，
這個階段, 所做的事情就是和捕獲階段相反的，如圖所示；
當然了，預設情況下，我們嵌套的三個div執行的是冒泡事件，當然了，我們也可以設定是表現為
捕獲行為還是冒泡行為，下面通過代碼執行個體來說明；
預設情況下是冒泡行為，我們先來看冒泡：
我們定義三個嵌套的div，然後分别給每個div設定 click 監聽，分别彈出不同的内容；
效果圖：
代碼實作：
<!DOCTYPE html> < html> < head> < meta charset= "utf-8" > < meta name= "newbean" /> < title > 事件捕獲和事件冒泡 </ title > < style type = "text/css" > #a { width : 400 px ; height : 400 px ; background-color : #ccc ; padding : 50 px ;} #b { width : 200 px ; height : 200 px ; background-color :pink; padding : 50 px ;} #c { width : 80 px ; height : 80 px ; background-color :greenyellow; padding : 50 px ;} < / style > </ head> < body> < div id= "a" >我是第一個 < div id= "b" >我是第二個 < div id= "c" > 我是第三個 </ div > </ div > </ div > < script > var a = document. getElementById ( "a" ); var b = document. getElementById ( "b" ); var c = document. getElementById ( "c" ); a . addEventListener ( "click" , function (){ alert ( "我是第一個" ); }); b . addEventListener ( "click" , function (){ alert ( "我是第二個" ); }); c . addEventListener ( "click" , function (){ alert ( "我是第三個" ); }); < / script > </ body> </ html>
結果：當我們點選第一個div時，彈出 “ 我是第一個 ”；
當我們點選第二個div時，先彈出“我是第二個”，再彈出“我是第一個”；
當我們點選第三個div時，先彈出 “我是第三個”，再彈出我是“第二個”，最後彈出“我是第一個”；
這個就是典型的時間冒泡；
我們再來看看捕獲：
代碼：
<!DOCTYPE html> < html> < head> < meta charset= "utf-8" > < meta name= "newbean" /> < title > 事件捕獲和事件冒泡 </ title > < style type = "text/css" > #a { width : 400 px ; height : 400 px ; background-color : #ccc ; padding : 50 px ;} #b { width : 200 px ; height : 200 px ; background-color :pink; padding : 50 px ;} #c { width : 80 px ; height : 80 px ; background-color :greenyellow; padding : 50 px ;} < / style > </ head> < body> < div id= "a" >我是第一個 < div id= "b" >我是第二個 < div id= "c" > 我是第三個 </ div > </ div > </ div > < script > var a = document. getElementById ( "a" ); var b = document. getElementById ( "b" ); var c = document. getElementById ( "c" ); a . addEventListener ( "click" , function (){ alert ( "我是第一個" ); }, true ); b . addEventListener ( "click" , function (){ alert ( "我是第二個" ); }, true ); c . addEventListener ( "click" , function (){ alert ( "我是第三個" ); }, true ); < / script > </ body> </ html>
結果：當我們點選第一個div時，彈出 “ 我是第一個 ”；
當我們點選第二個div時，先彈出“我是第一個”，再彈出“我是第二個”；
當我們點選第三個div時，先彈出 “我是第一個”，再彈出我是“第二個”，最後彈出“我是第三個”；
這個就是捕獲行為；
和冒泡的差別就是我們加了一個參數：
obj.addEventListener("click",function,true);
這裡的第三個參數如果不寫，那麼就是預設的冒泡行為；如果寫上false，那麼還是冒泡行為；
但是如果寫上true，那麼就是捕獲行為；