标签:
假设有个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