概述:
什么叫事件委托？他還有一個名字叫做事件代理，（時間代理 === 事件委托，現在才知道這兩個是一個意思）
高程3上講：事件委托即是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。
借鑒其他大牛的一個例子，也為自己更好的理解一下：收快遞例子
有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委托給前臺MM代為簽收。現實當中，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞）。前臺MM收到快遞后，她會判斷收件人是誰，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個優勢，那就是即使公司里來了新員工（不管多少），前臺MM也會在收到寄給新員工的快遞后核實并代為簽收。
兩層意思：
1.現在委托前臺的同事是可以簽收的，即程序中的現有的dom節點是有事件的；
2.新員工也是可以被前臺mm代為簽收的，即程序中新添加的dom節點也是有事件的；
為什么要用事件委托？？？事件委托有什么好處？？？
一般來說，dom是需要有事件處理程序的，我們會直接給他事件處理程序就好了，那么如果是很多dom元素需要添加事件處理呢？？？
比如 100個li，每個li 都有相同的click點擊事件，可能我們會有for循環的方法，來遍歷所有li，然后為每個li添加綁定事件。
這么做毫無疑問的是對性能有很大的影響；
在js中，添加到頁面上的事件處理程序的多少將直接關系到頁面運行的整體性能，因為需要不斷的與dom節點進行交互，訪問dom次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間。
這就是性能優化，減少dom操作的原因；
如果采用事件委托，就會將所有的操作放到js程序里面，與dom的操作就只交互一次，這樣減少了dom交互次數，性能就會提升；
事件委托原理：
事件委托就是利用事件冒泡原理實現的！
事件冒泡：就是事件從最深節點開始，然后逐步向上傳播事件；
例：頁面上有一個節點樹，div > ul > li > a
比如給最里面的a 加一個click 事件，那么事件就會一層一層的往外執行，執行順序 a > li > ul > div, 有這樣一個機制，當我們給最外層的div 添加點擊事件，那么里面的ul ， li ， a 做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委托，委托他們父集代為執行事件；
業務需求：實現功能，點擊td ,單元格變色；
html結構
[html]
view plain copy<!-- 事件綁定 -->
<table id="myTable" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
[javascript]
view plain copywindow.onload = function(){
var oTa = document.getElementById("myTable");
var aTd = oTa.getElementsByTagName('td');
for(var i=0;i<aTd.length;i++){
aTd[i].onclick = function(){
aTd[i].style.background = 'red';
}
}
}
上面的辦法是最簡單的辦法，也是最笨的辦法，我們看看執行了多少次dom操作，首先找到table 然后遍歷td ，當點擊td的時候，又要找一次目標的li的位置，才能執行最后的操作，每次點擊都要找一次td
那我們用事件委托的方式怎么來寫呢，？？
[javascript]
view plain copywindow.onload = function(){
var oTa= document.getElementById("myTable");
oTa.onclick = function(){ //點擊 table、td均可以alert(123)
alert(123);
}}
[javascript]
view plain copy<pre></pre>
<pre></pre>
這里用父集做事件處理，當td被點擊時，由于冒泡原理事件就會冒泡到table上，因此table上有點擊事件，所以事件就會被觸發;
當然單當點擊table本身的時候也是會觸發的；
如果我們只想讓td觸發而不想讓table觸發，怎么辦呢？？？
Event對象提供了一個屬性叫做target，可以返回事件的目標節點，我們稱之為事件源，也就是說，target就可以表示當前事件操作的dom，但可能不是真正操作的dom，
存在兼容性問題：標準瀏覽器：event.target，IE瀏覽器：event.srcElement，
此時只是獲取了當前節點的位置，但并不知道節點名稱，這里我們用nodeName來獲取具體是什么標簽名，這個返回值是一個大寫的，判斷時需要轉換為小寫；[javascript]
view plain copywindow.onload = function(){
var oTa = document.getElementById("myTable");
oTa.onclick = function(e){
var e = e || window.event; //處理兼容性
var target = e.target || e.srcElement;
target.nodeName.toLowerCase() == 'td' ? alert('我點中了table') ：(target.style.background = 'red'); //三元運算符進行判斷
}
}
這樣改一下，就只有td會觸發事件啦，且每次只執行一次dom操作，如果td很多的話，將大大減小dom的操作；
上面的例子是說td點擊都是產生同樣的效果，要是每個td被點擊的效果都不一樣，那么事件委托還有用嗎，？？？
[javascript]
view plain copy<!-- 事件綁定 -->
<table id="myTable" border="1">
<tr>
<td id="add">增加</td>
<td id="delete">刪除</td>
<td id="modfiy">修改</td>
<td id="select">查找</td>
</tr>
</table>
非事件委托寫法
[javascript]
view plain copywindow.onload = function(){
var Add = document.getElementById("add");
var Delete = document.getElementById("delete");
var Move = document.getElementById("move");
var Select = document.getElementById("select");
Add.onclick = function(){
alert('添加');
};
Remove.onclick = function(){
alert('刪除');
};
Move.onclick = function(){
alert('移動');
};
Select.onclick = function(){
alert('選擇');
}
}
4個按鈕，點擊每一個做不同的動作，，，那么至少需要4次dom操作；
如果用事件委托，能進行優化嗎？
事件委托寫法
[javascript]
view plain copywindow.onload = function(){
var myTable = document.getElementById("myTable");
myTable.onclick = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLocaleLowerCase() == 'table'){
switch(target.id){
case 'add' :
alert('添加');
break;
case 'remove' :
alert('刪除');
break;
case 'move' :
alert('移動');
break;
case 'select' :
alert('選擇');
break;
}
}
}
}
用事件委托，只用一次dom操作，就能完成所有的效果，性能肯定比上面的好；
前面講的都是document加載完成后現有的dom節點的操作；
那么如果是新增的節點，新增的節點會有事件嗎？？？也就是說，新來的一個員工，他能收到快遞嗎？？？？
看一下正常添加節點的方法：
[javascript]
view plain copy<input type="button" name="" id="btn" value="添加" />
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
用一般的方法，循環加給li加點擊事件，你會發現新增的li沒有事件！！！
解決辦法：
一般情況下，我們會用一個函數把那個for循環包起來，然后再在點擊事件里調用這個函數，這樣也能實現目的，功能雖然實現了，但無疑又增加了dom操作，
用事件委托的方式如何做呢？？？
[javascript]
view plain copy<script type="text/javascript">
window.onload = function(){
var ul1 = document.getElementById('ul1');
var li = document.getElementsByTagName('li');
var btn = document.getElementById('btn');
var num = 1;
// for(var i=0;i<li.length;i++){
// li[i].onclick = function(){
// alert(this.innerHTML);
// }
// num++;
// }
ul1.onclick = function(e){
var e = e || window.event;
var target = e.target || event.srcElement;
console.log(target.nodeName);
target.nodeName.toLowerCase() == 'li' ? alert(target.innerHTML) : alert("您點中了ul標簽");
}
btn.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML = 111*num;
ul1.appendChild(oLi);
}
}
上面是用事件委托的方式，新添加的子元素也是有點擊功能的；
我們可以發現，當用事件委托的時候，根本不需要遍歷元素的子節點，只需要給父級元素添加事件就好了，
其他的代碼都是在js里面執行的，這樣可以大大減少dom操作，
這就是我理解的事件委托的精髓；
jQuery事件委托：
我直接上code了，jquery的操作是如此的簡單，一個on全搞定！！！
[html]
view plain copy<!-- 事件綁定 -->
<table id="myTable" border="1">
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
</table>
[javascript]
view plain copy<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#myTable td").click(function(){
$(this).html(); //普通寫法，如果有100個td元素，就要綁定100次事件，十分浪費性能
})
$("#myTable").click(function(e){ //這種點擊方式怎么排除父元素？？？？
console.log(e.target);
var $clicked = $(e.target); //e.target 捕捉到觸發的元素
console.log(e.target.nodeName); //結果為大寫，用toLowerCase() 轉換為小寫
e.target.nodeName.toLowerCase() == 'table' ? alert('我點中table了') : $clicked.html(); //排除父元素的點擊效果
})
// jQuery1.7的on綁定方法,替代了以往的bind、live等方法，內部自動含有事件委托機制
// $(selector).on(event,childSelector,data,function,map) on方法的語法
// $(selector).on(event,childSelector,function(){}) on方法語法，綁定在父元素上 事件，子選擇器，回調函數
$("#myTable").on('click','td',function(){
$(this).html();
})
})
</script>
總結：
事件委托的優點：1.在頁面dom元素較多的情況下，大大減少了dom操作，優化了性能；
2.值需要為一個父元素綁定事件，就可以管理他下面的所有子元素；
3。。。。。。啦啦啦啦，我也不知道啦
適用性：
適合：click 、mousedown、mouseup、keydown 、keyup、keypress
不適合：mouseover和mouseout雖然也有事件冒泡，但是處理他們要特別注意，因為需要經常計算他們的位置，處理起來不太容易，
focus、blur之類的本身就沒有冒泡的特性，自然不能用事件委托；
