事件委託

概述：

　　什麼是事件委託：通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來作，這個事件原本是加在某些元素上的，然而你卻加到別人身上來作，完成這個事件。

　　舉個列子：有三個同事預計會在週一收到快遞。爲簽收快遞，有兩種辦法：一是三我的在公司門口等快遞；二是委託給前臺MM代爲簽收。現實當中，咱們大都採 用委託的方案（公司也不會容忍那麼多員工站在門口就爲了等快遞）。前臺MM收到快遞後，她會判斷收件人是誰，而後按照收件人的要求籤收，甚至代爲付款。這 種方案還有一個優點，那就是即便公司裏來了新員工（無論多少），前臺MM也會在收到寄給新員工的快遞後覈實並代爲簽收。

　　事件委託主要應用於給大量相同的dom元素綁定事件和給尚不存在的元素綁定事件。

　　事件委託是利用事件的冒泡原理來實現的，何爲事件冒泡呢？就是事件從最深的節點開始，而後逐步向上傳播事件，舉個例子：頁面上有這麼一個節點 樹，div>ul>li>a;好比給最裏面的a加一個click點擊事件，那麼這個事件就會一層一層的往外執行，執行順序 a>li>ul>div，有這樣一個機制，那麼咱們給最外面的div加點擊事件，那麼裏面的ul，li，a作點擊事件的時候，都會冒泡 到最外層的div上，因此都會觸發，這就是事件委託，委託它們父級代爲執行事件。

事件委託怎麼實現：

先來個栗子：給ul下的每一個li綁定click事件

<ul id="list">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<ul>

不使用事件代理是處理以下：

window.onload = function(){
    var oUl = document.getElementById("list");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert('aaa');
        }
    }
}

這樣當存在大量的li時，會頻繁的操做dom，不利於用戶體驗。

事件委託處理以下：

window.onload = function(){
    var oUl = document.getElementById("list");
   oUl.onclick = function(ev){
        var ev = ev || window.event;
　　　　 var target = ev.target || ev.srcElement;//標準瀏覽器用ev.target，IE瀏覽器用event.srcElement，
	if(target.nodeName.toLowerCase() == 'li'){
	　　alert(target.innerHTML);
	}
    }
}

這樣改下就只有點擊li會觸發事件了，且每次只執行一次dom操做，若是li數量不少的話，將大大減小dom的操做，優化的性能可想而知！

在jquery中的事件委託方法爲：on()，之前爲：delegate()

$(function(){ 
     $('#list').on('click','li',function(){ 
            ....
      }) 
});

總結：

適合用事件委託的事件：click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout雖然也有事件冒泡，可是處理它們的時候須要特別的注意，由於須要常常計算它們的位置，處理起來不太容易。

不適合的就有不少了，舉個例子，mousemove，每次都要計算它的位置，很是很差把控，在不如說focus，blur之類的，自己就沒用冒泡的特性，天然就不能用事件委託了。