• 定義：通俗的講，事件就是onclick，onmouseover，onmouseout等就是事件，委托呢，就是讓別人來(lái)做，這個(gè)事件本來(lái)是加在某些元素上的，然而你卻加到別人身上來(lái)做，完成這個(gè)事件。
• 原理：利用冒泡的原理，把事件加到父級(jí)上，觸發(fā)執(zhí)行效果。
• 好處：1. 減少dom的遍歷與dom操作，提高性能。2. 動(dòng)態(tài)新添加的元素還會(huì)有之前的事件。

示例：鼠標(biāo)放置到li上后改變當(dāng)前l(fā)i背景色

html：

<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>

不用事件委托：

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }
}

利用遍歷就可以做到li上面添加鼠標(biāo)事件。
但是如果說(shuō)我們可能有很多個(gè)li用for循環(huán)的話就比較影響性能。

使用事件委托：

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

/*
這里要用到事件源
*/
  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 = "";
    }
  }
}

這樣，當(dāng)鼠標(biāo)在li上時(shí)，根據(jù)事件冒泡，由當(dāng)前節(jié)點(diǎn)（當(dāng)前l(fā)i節(jié)點(diǎn)觸發(fā)了ul的mouseover事件）自下而上觸發(fā)事件，當(dāng)節(jié)點(diǎn)對(duì)象是li時(shí)執(zhí)行我們的操作。避免了dom遍歷。
??此外，和事先遍歷dom為每個(gè)li綁定事件不同，事件委托的方式是將事件綁定在ul上，所以在運(yùn)行時(shí)動(dòng)態(tài)添加的li上仍有效果。

術(shù)語(yǔ)解釋：

• 事件對(duì)象： 如上代碼，當(dāng)onmousemove事件發(fā)生時(shí)，就會(huì)產(chǎn)生一個(gè)事件對(duì)象，就是程序中的event對(duì)象。
• 獲取事件對(duì)象：var e = event || window.event;IE下是window.event，標(biāo)準(zhǔn)下是event
• 事件源：事件源，在事件中，當(dāng)前操作的那個(gè)元素就是事件源。
• 獲取事件源：IE：window.event.srcElement ，標(biāo)準(zhǔn)：event.target
• target.nodeName：找到元素的標(biāo)簽名

*筆記整理自博客園