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

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