利用事件委托解决大量循环重复的事件。

假设有个ul,它下面有5000个li;

需求是给这5000个li添加一个点击事件，;

有些人会去这样做

var oUl = document.getElementById('oUl');
var aLi = oUl.getElementsByTagName('li');
var len = aLi.length;
for(var i =0;i<len;i++){
    (function(index){
         aLi[i].onclick = function(){
             fn()
         };
     })(i)
            
 }

这样做的弊端显而易见，遍历的基数越大，性能开销越大。

因此正确的做法应该是这样

var oUl = document.getElementById('oUl');
oUl.onclick = function(ev){
  var oEv = ev || event;
  var oSrc = oEv.srcElement || oEv.target;
  if(oSrc.tagName=='li'){
    fn();
  }  
}

利用时间冒泡的特性进行事件委托。避免了大量的循环遍历，减少了性能开销。

jQuery下可以利用on添加事件的方法达到同样的效果;

var $ul = $('ul');
$ul.on('click','li',function(){
   fn(); 
})

 

转载于:https://www.cnblogs.com/vidy/p/4918818.html