JavaScript事件（冒泡和捕獲、事件委託）

**1、事件的捕獲和冒泡**
>他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數，就是控制事件觸發順序是否爲事件捕獲。true,事件捕獲；false,事件冒泡。默認false,即事件冒泡。Jquery的e.stopPropagation會阻止冒泡，意思就是到我爲止，個人爹和祖宗的事件就不要觸發了。


>（1）事件捕捉（Capturing）階段：事件將沿着DOM樹向下傳送，通過目標節點的每個祖先節點，直至目標節點。例如，用戶單擊了一個超連接，則該單擊事件將從document節點轉送到html元素、body元素以及包含該連接的p元素。目標節點就是觸發事件的DOM節點。
（2）目標（target）階段：在此階段中，事件傳導到目標節點。瀏覽器在查找到已經指定給目標事件的監聽器後，就會運行該監聽器。
（3）冒泡（Bubbling）階段：事件將沿着DOM樹向上轉送，再次逐個訪問目標元素的祖先節點直到document節點。該過程當中的每一步，瀏覽器都將檢測那些不是捕捉事件監聽器的事件監聽器並執行它們。（即：與觸發事件無關的事件監聽器也因爲冒泡將被執行）。
document ---> target目標 ----> document

由此，addEventListener(監聽事件)的第三個參數設置爲true和false的區別已經很是清晰了：

true表示該元素在事件的「捕獲階段」（由外往內傳遞時）響應事件；

false表示該元素在事件的「冒泡階段」（由內向外傳遞時）響應事件。

**事件的冒泡**
*本例子也是一個標準的事件委託*
```
//需求：鼠標放到li上對應的li背景變灰。
　<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
//利用事件冒泡實現
　$("ul").on("mouseover",function(e){
$(e.target).css("background-color","#ddd").siblings().css("background-color","white");
})
```
注：*在這裏使用target是獲取當前的目標，是鼠標觸發的那個元素。而不能使用this，獲取當前的元素，this獲取的只能是ul*
>而且e.target有不少屬性能夠操做
event.target.nodeName 　　//獲取事件觸發元素標籤name（li,p…）
event.target.id　　　　　　//獲取事件觸發元素id
event.target.className　　//獲取事件觸發元素classname
event.target.innerHTML　　//獲取事件觸發元素的內容（li）

**阻止事件冒泡**
```
// 作瀏覽器兼容
var e = (evt)? evt:window.event; //獲取IE或非IE瀏覽器的事件
if (window.event) { //若是是IE瀏覽器
e.cancelBubble = true; //IE瀏覽器，設置該屬性爲true,取消事件冒泡
}else{
e.stopPropagation(); //非IE瀏覽器，該方法取消事件的進一步捕獲或冒泡。
}
```