[TOC]
## 事件捕获、事件冒泡、事件委托
~~~
事件冒泡：就是触发子事件的同时父事件至最上一级的事件也会触发
事件捕获：事件从最上一级标签开始往下查找，直到捕获到事件目标
事件委托：利用事件冒泡处理动态元素事件绑定的方法
$("ul").on("click", selector, function (e) {})
如果指定selector，则为事件委托；否则，就是常规绑定。
~~~
### 1.事件冒泡
~~~
绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡 由父级事件控制
document.getElementById("parent").addEventListener("click", function (e) {
alert("parent事件被触发，" + e.target.id);
},true)
document.getElementById("child").addEventListener("click", function (e) {
alert("child事件被触发，" + e.target.id)
})
~~~
### 2.事件委托
> （事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。 ）
~~~
$("ul").on("click","li",function(){
$(e.target).css("background-color","#ddd").siblings().css("background-color","white")
})
~~~
> 鼠标点击li上对应的li背景变灰
好处：
1， 提高性能。
2， 新添加的元素还会有之前的事件。
### 3. 阻止事件冒泡
~~~
event.stopPropagation()
event.preventDefault();
~~~
### 4. 事件委托题
> 给table表格中的每个td绑定事件，td数量为1000+，写一下你的思路(事件委托题)：
```
<table id="table">
<tr>
<td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td>
</tr>
<tr>
<td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td>
</tr>
<tr>
<td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td>
</tr>
…………
</table>
```
```
let table =document.querySelector("#table");
table.addEventListener("click",(e)=>{
let {nodeName} = e.target;
if(nodeName.toUpperCase() === "TD"){
console.log(e.target);//<td>N</td>
}
},false);
```
