1拱燃、前言 :

本篇文章完全出自 凌云之翼(鏈接) 的博客揪阿。

2雁仲、概述

什么叫事件委托呢仔夺？它還有一個名字叫事件代理，JavaScript高級程序設(shè)計上講：事件委托就是利用事件冒泡攒砖，只指定一個事件處理程序缸兔，就可以管理某一類型的所有事件。那這是什么意思呢吹艇？網(wǎng)上的各位大牛們講事件委托基本上都用了同一個例子惰蜜，就是取快遞來解釋這個現(xiàn)象，我仔細(xì)揣摩了一下受神，這個例子還真是恰當(dāng)抛猖，我就不去想別的例子來解釋了，借花獻(xiàn)佛鼻听，我摘過來财著，大家認(rèn)真領(lǐng)會一下事件委托到底是一個什么原理:
有三個同事預(yù)計會在周一收到快遞。為簽收快遞撑碴，有兩種辦法：一是三個人在公司門口等快遞撑教；二是委托給前臺MM代為簽收。現(xiàn)實當(dāng)中醉拓，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞）伟姐。前臺MM收到快遞后收苏，她會判斷收件人是誰，然后按照收件人的要求簽收愤兵，甚至代為付款鹿霸。這種方案還有一個優(yōu)勢，那就是即使公司里來了新員工（不管多少）秆乳，前臺MM也會在收到寄給新員工的快遞后核實并代為簽收懦鼠。
這里其實還有2層意思的 :
第一，現(xiàn)在委托前臺的同事是可以代為簽收的矫夷，即程序中的現(xiàn)有的dom節(jié)點是有事件的葛闷；
第二，新員工也是可以被前臺MM代為簽收的双藕，即程序中新添加的dom節(jié)點也是有事件的淑趾。

3、為什么要用事件委托

一般來說忧陪，dom需要有事件處理程序扣泊，我們都會直接給它設(shè)事件處理程序就好了，那如果是很多的dom需要添加事件處理呢嘶摊？比如我們有100個li延蟹，每個li都有相同的click點擊事件，可能我們會用for循環(huán)的方法叶堆，來遍歷所有的li阱飘，然后給它們添加事件，那這么做會存在什么影響呢虱颗？
在JavaScript中沥匈，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運(yùn)行性能，因為需要不斷的與dom節(jié)點進(jìn)行交互忘渔，訪問dom的次數(shù)越多高帖，引起瀏覽器重繪與重排的次數(shù)也就越多，就會延長整個頁面的交互就緒時間畦粮，這就是為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因散址；如果要用事件委托，就會將所有的操作放到j(luò)s程序里面宣赔，與dom的操作就只需要交互一次预麸，這樣就能大大的減少與dom的交互次數(shù)，提高性能儒将；
每個函數(shù)都是一個對象吏祸，是對象就會占用內(nèi)存，對象越多椅棺，內(nèi)存占用率就越大犁罩，自然性能就越差了（內(nèi)存不夠用，是硬傷两疚，哈哈）床估，比如上面的100個li，就要占用100個內(nèi)存空間诱渤，如果是1000個丐巫，10000個呢，那只能說呵呵了勺美，如果用事件委托递胧，那么我們就可以只對它的父級（如果只有一個父級）這一個對象進(jìn)行操作，這樣我們就需要一個內(nèi)存空間就夠了赡茸，是不是省了很多缎脾，自然性能就會更好。

4占卧、事件委托的原理

事件委托是利用事件的冒泡原理來實現(xiàn)的遗菠，何為事件冒泡呢？就是事件從最深的節(jié)點開始华蜒，然后逐步向上傳播事件辙纬，舉個例子：頁面上有這么一個節(jié)點樹，div>ul>li>a;比如給最里面的a加一個click點擊事件叭喜，那么這個事件就會一層一層的往外執(zhí)行贺拣，執(zhí)行順序a>li>ul>div，有這樣一個機(jī)制捂蕴，那么我們給最外面的div加點擊事件譬涡，那么里面的ul，li启绰，a做點擊事件的時候昂儒，都會冒泡到最外層的div上，所以都會觸發(fā)委可，這就是事件委托渊跋，委托它們父級代為執(zhí)行事件。

5着倾、事件委托怎么實現(xiàn)

(1)子節(jié)點實現(xiàn)相同的功能

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

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

上面的代碼的意思很簡單拾酝，相信很多人都是這么實現(xiàn)的，我們看看有多少次的dom操作卡者，首先要找到ul蒿囤，然后遍歷li，然后點擊li的時候崇决，又要找一次目標(biāo)的li的位置材诽，才能執(zhí)行最后的操作底挫，每次點擊都要找一次li。

那么我們用事件委托的方式做又會怎么樣呢脸侥？

window.onload = function(){
    var oUl = document.getElementById("ul1");
    oUl.onclick = function(){
        alert(123);
    }
}

這里用父級ul做事件處理建邓，當(dāng)li被點擊時，由于冒泡原理睁枕，事件就會冒泡到ul上官边，因為ul上有點擊事件，所以事件就會觸發(fā)外遇，當(dāng)然平酿，這里當(dāng)點擊ul的時候伐蒋，也是會觸發(fā)的，那么問題就來了，如果我想讓事件代理的效果跟直接給節(jié)點的事件效果一樣怎么辦楚昭，比如說只有點擊li才會觸發(fā)伸刃，不怕阳惹，我們有絕招：
Event對象提供了一個屬性叫target的榛，可以返回事件的目標(biāo)節(jié)點，我們成為事件源谨究，也就是說恩袱，target就可以表示為當(dāng)前的事件操作的dom，但是不是真正操作dom胶哲，當(dāng)然畔塔，這個是有兼容性的，標(biāo)準(zhǔn)瀏覽器用ev.target鸯屿，IE瀏覽器用event.srcElement澈吨，此時只是獲取了當(dāng)前節(jié)點的位置，并不知道是什么節(jié)點名稱寄摆，這里我們用nodeName來獲取具體是什么標(biāo)簽名谅辣，這個返回的是一個大寫的，我們需要轉(zhuǎn)成小寫再做比較

window.onload = function(){
    var oUl = document.getElementById("ul1");
    oUl.onclick = function(ev){
         var ev = ev || window.event;
         var target = ev.target || ev.srcElement;
         if(target.nodeName.toLowerCase() == 'li'){
             alert(123);
             alert(target.innerHTML);
          }
      }
}

這樣改下就只有點擊li會觸發(fā)事件了婶恼，且每次只執(zhí)行一次dom操作桑阶，如果li數(shù)量很多的話，將大大減少dom的操作勾邦，優(yōu)化的性能可想而知蚣录！

上面的例子是說li操作的是同樣的效果，要是每個li被點擊的效果都不一樣眷篇，那么用事件委托還有用嗎萎河？

<div id="box">
   <input type="button" id="add" value="添加" />
   <input type="button" id="remove" value="刪除" />
   <input type="button" id="move" value="移動" />
   <input type="button" id="select" value="選擇" />
</div>

window.onload = function(){
    var Add = document.getElementById("add");
    var Remove = document.getElementById("remove");
    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('選擇');
    }        
}

上面實現(xiàn)的效果我就不多說了，很簡單，4個按鈕虐杯，點擊每一個做不同的操作玛歌，那么至少需要4次dom操作，如果用事件委托擎椰，能進(jìn)行優(yōu)化嗎沾鳄？

window.onload = function(){
    var oBox = document.getElementById("box");
    oBox.onclick = function (ev) {
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLocaleLowerCase() == 'input'){
             switch(target.id){
                case 'add' :
                alert('添加');
                break;
                case 'remove' :
                alert('刪除');
                break;
                case 'move' :
                alert('移動');
                break;
                case 'select' :
                alert('選擇');
                break;
            }
       }
    }
}

用事件委托就可以只用一次dom操作就能完成所有的效果，比上面的性能肯定是要好一些的

現(xiàn)在講的都是document加載完成的現(xiàn)有dom節(jié)點下的操作确憨，那么如果是新增的節(jié)點，新增的節(jié)點會有事件嗎瓤的？也就是說休弃，一個新員工來了，他能收到快遞嗎圈膏？
看一下正常的添加節(jié)點的方法：

<input type="button" name="" id="btn" value="添加" />
<ul id="ul1">
   <li>111</li>
   <li>222</li>
   <li>333</li>
   <li>444</li>
</ul>

現(xiàn)在是移入li塔猾，li變紅，移出li稽坤，li變白丈甸，這么一個效果，然后點擊按鈕尿褪，可以向ul中添加一個li子節(jié)點

window.onload = function(){
    var oBtn = document.getElementById("btn");
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    var num = 4;
    //鼠標(biāo)移入變紅睦擂，移出變白
    for(var i=0; i<aLi.length;i++){
       aLi[i].onmouseover = function(){
           this.style.background = 'red';
        };
       aLi[i].onmouseout = function(){
          this.style.background = '#fff';
       }
     }
    //添加新節(jié)點
    oBtn.onclick = function(){
        num++;
        var oLi = document.createElement('li');
        oLi.innerHTML = 111*num;
        oUl.appendChild(oLi);
     };
}

這是一般的做法，但是你會發(fā)現(xiàn)杖玲，新增的li是沒有事件的顿仇，說明添加子節(jié)點的時候，事件沒有一起添加進(jìn)去摆马，這不是我們想要的結(jié)果臼闻，那怎么做呢？一般的解決方案會是這樣囤采，將for循環(huán)用一個函數(shù)包起來述呐，命名為mHover，如下 :

window.onload = function(){
    var oBtn = document.getElementById("btn");
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    var num = 4;
    function mHover () {
       //鼠標(biāo)移入變紅蕉毯，移出變白
       for(var i=0; i<aLi.length;i++){
          aLi[i].onmouseover = function(){
             this.style.background = 'red';
          };
          aLi[i].onmouseout = function(){
              this.style.background = '#fff';
           }
        }
      }
      mHover ();
      //添加新節(jié)點
      oBtn.onclick = function(){
         num++;
         var oLi = document.createElement('li');
         oLi.innerHTML = 111*num;
         oUl.appendChild(oLi);
         mHover ();
      };
}

雖然功能實現(xiàn)了乓搬，看著還挺好，但實際上無疑是又增加了一個dom操作恕刘，在優(yōu)化性能方面是不可取的缤谎，那么有事件委托的方式，能做到優(yōu)化嗎褐着？

window.onload = function(){
    var oBtn = document.getElementById("btn");
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    var num = 4;
    //事件委托坷澡，添加的子元素也有事件
    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'li'){
            target.style.background = "red";
        }
        
    };
    oUl.onmouseout = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'li'){
            target.style.background = "#fff";
        }
        
    };
    //添加新節(jié)點
    oBtn.onclick = function(){
        num++;
        var oLi = document.createElement('li');
        oLi.innerHTML = 111*num;
        oUl.appendChild(oLi);
    };
}

看，上面是用事件委托的方式含蓉，新添加的子元素是帶有事件效果的频敛，我們可以發(fā)現(xiàn)项郊，當(dāng)用事件委托的時候，根本就不需要去遍歷元素的子節(jié)點斟赚，只需要給父級元素添加事件就好了着降，其他的都是在js里面的執(zhí)行，這樣可以大大的減少dom操作拗军，這才是事件委托的精髓所在任洞。

6、深入

<ul id="test">
    <li>
        <p>11111111111</p>
    </li>
    <li>
        <div>
        </div>
    </li>
    <li>
        <span>3333333333</span>
    </li>
    <li>4444444</li>
</ul>

如上列表发侵，有4個li交掏，里面的內(nèi)容各不相同，點擊li刃鳄，event對象肯定是當(dāng)前點擊的對象盅弛，怎么指定到li上，下面我直接給解決方案 :

var oUl = document.getElementById('test');
oUl.addEventListener('click',function(ev){
    var target = ev.target;
    while(target !== oUl ){
        if(target.tagName.toLowerCase() == 'li'){
            console.log('li click~');
            break;
        }
        target = target.parentNode;
    }
})

核心代碼是while循環(huán)部分叔锐，實際上就是一個遞歸調(diào)用挪鹏，你也可以寫成一個函數(shù)，用遞歸的方法來調(diào)用愉烙，同時用到冒泡的原理讨盒，從里往外冒泡，知道currentTarget為止步责，當(dāng)當(dāng)前的target是li的時候催植，就可以執(zhí)行對應(yīng)的事件了，然后終止循環(huán)

注明 : 本文轉(zhuǎn)載自 凌云之翼