[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);
```
