JavaScript事件（冒泡和捕获、事件委托）

**一、事件的捕获和冒泡**
>他们是描述事件触发时序问题的术语。事件捕获指的是从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浏览器，该方法取消事件的进一步捕获或冒泡。
}
```