事件委托（代理）

标签：length   htm   targe   也会   logs   dom操作   处理   ldo   ++   

事件委托：当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

例如：

<ul id="ul1">                                  var oUl = document.getElementById("ul1");

      <li>111</li>                             var aLi = oUl.getElementsByTagName(‘li‘);

      <li>222</li>                              for(var i=0;i<aLi.length;i++){

      <li>333</li>                                aLi[i].onclick = function(){

      <li>444</li>                                      alert(123);

</ul>                                                 }

                                                  }

备注：事件委托主要是为了减少DOM操作，4个li事件，每当for一次，点击一次就会查找一次oUl.getElementsByTagName（）；总共4次DOM操作+1次查找ulDOm操作

如果将onclick事件委托于其父元素即<ul> ，则只需要1次Dom操作，从而大大优化性能。

var oUl = document.getElementById("ul1");

oUl.onclick = function(){

      alert(123);

    }

当然其中ul也会触发自身的事件，我们可以使用event.target来进行对所点事件的绑定。

优点：大大减少dom的操作

具体详情请见：https://www.cnblogs.com/liugang-vip/p/5616484.html

事件委托（代理）

标签：length   htm   targe   也会   logs   dom操作   处理   ldo   ++   

原文地址：https://www.cnblogs.com/8080zh/p/9224481.html