码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-10-28 22:32:22      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:

假设有个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(); 
})

 

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

标签:

原文地址:http://www.cnblogs.com/vidy/p/4918818.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!