js事件委托

• 定义：通俗的讲，事件就是onclick，onmouseover，onmouseout等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
• 原理：利用冒泡的原理，把事件加到父级上，触发执行效果。
• 好处：1. 减少dom的遍历与dom操作，提高性能。2. 动态新添加的元素还会有之前的事件。

示例：鼠标放置到li上后改变当前li背景色

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上面添加鼠标事件。
但是如果说我们可能有很多个li用for循环的话就比较影响性能。

使用事件委托：

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 = "";
    }
  }
}

这样，当鼠标在li上时，根据事件冒泡，由当前节点（当前li节点触发了ul的mouseover事件）自下而上触发事件，当节点对象是li时执行我们的操作。避免了dom遍历。
  此外，和事先遍历dom为每个li绑定事件不同，事件委托的方式是将事件绑定在ul上，所以在运行时动态添加的li上仍有效果。

---

术语解释：

• 事件对象： 如上代码，当onmousemove事件发生时，就会产生一个事件对象，就是程序中的event对象。
• 获取事件对象：var e = event || window.event;IE下是window.event，标准下是event
• 事件源：事件源，在事件中，当前操作的那个元素就是事件源。
• 获取事件源：IE：window.event.srcElement ，标准：event.target
• target.nodeName：找到元素的标签名

---

*笔记整理自博客园