事件捕捉
捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發(fā)京髓，然后到最精確(也可以在窗口級別捕獲事件堰怨，不過必須由開發(fā)人員特別指定)。
事件冒泡
冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發(fā)灿巧。
捕獲和冒泡過程圖
捕捉和冒泡是相反的揽涮。
事件捕獲和事件冒泡屬于兩個相反的過程蒋困，這里可以有一個我感覺十分恰當?shù)谋扔鳎?strong>當你把一個可以漂浮在水面上的物品盾似，使勁向水里砸下去，它會首先有一個下降的過程雪标，這個過程就可以理解為從最頂層向事件發(fā)生的最具體元素（目標點）的捕獲過程零院；之后由于浮力大于物體自身的重力村刨，物體會在到達最低點（ 最具體元素）之后漂浮到水面上门粪，這個過程相對于事件捕獲是一個回溯的過程烹困，即事件冒泡。
實例
<!DOCTYPE html>
<html>
<head>
<title>event</title>
</head>
<body>
<div id="obj1">
welcome
<h5 id="obj2">hello</h5>
<h5 id="obj3">world</h5>
</div>
<script type="text/javascript">
var obj1=document.getElementById('obj1');
var obj2=document.getElementById('obj2');
obj1.addEventListener('click',function(){
alert('hello');
},false);
obj2.addEventListener('click',function(){
alert('world');
})
</script>
</body>
</html>
如上所示乾吻，這是一個十分簡單地文檔結(jié)構(gòu)：document > html > body > div > h5髓梅。
并且分別在obj1,obj2上綁定了一個點擊事件，由于addEventListener的第三個參數(shù)為false,所以頁面是在冒泡階段處理綁定事件枯饿。此時整個頁面可以有三種行為出現(xiàn):
注意：
事件的第三個參數(shù)為ture/false
true:捕捉酝锅。結(jié)合上圖可以理解為正序。
false:冒泡奢方。結(jié)合上圖理解為逆序。
- 點擊文字
welcome時蟋字，彈出hello。
此時就只觸發(fā)了綁定在obj1上的點擊事件鹊奖。具體冒泡實現(xiàn)過程如下：welcome屬于文本節(jié)點忠聚，點擊后两蟀，開始從文本節(jié)點查找网梢，當前文本節(jié)點沒有綁定點擊事件，繼續(xù)向上找欢瞪，找到父級（id為obj1的div）活烙，有綁定的點擊事件，執(zhí)行遣鼓，再向上找啸盏，body，沒有綁定點擊事件骑祟，再到html,document,都沒再有綁定的點擊事件回懦，好，整個冒泡過程結(jié)束次企。 -
點擊文字hello時怯晕，先彈出world，再彈出hello缸棵。
image.png -
點擊world時舟茶，彈出hello。
image.png
實例2
舉個例子。 ul 下面很多 li, 點擊li,輸出 li 的文字吧凉。循環(huán)每個li 添加點擊事件不是很好的選擇隧出。 可以把點擊事件寫在 ul 上，點擊 li 阀捅，事件會冒泡到 ul, 這樣只用寫一個事件胀瞪。
