js中点击事件可能产生的闭包

相信很多同学在写js的时候都遇到过闭包的问题，让我们先来看一个背景介绍，



有这样一组按钮，可能是成千上万个，他们需要一个点击事件来处理不同的情况，最暴力的办法是为每个按钮绑定一个事件，但这显然不是最佳的方法。那么最佳的方法是什么呢？假如他们每个按钮都有一个序号(我将这些按钮的id以升序排列，并存放在数组click_pops中，对应的button的id即为’#’+click_pops[i])，那么有人可能想对序号排序，然后对每个按钮添加绑定事件，大概是这样

for(var i = 0; i < click_pops.length; i ++){
$('#'+click_pops[i]).on('click',function(e){
toItsOwnFunc(i);
})
}

可是这样真的可以嘛？不妨一试，你会看到这并不会像想象中的那样为每个按钮添加点击事件，这个问题的解答主要是由于ES5的作用域的问题，当进行过这层循环后，i的最终值为click_pops.length，所以只有#click_pops[click_pops.length]才绑定了点击事件，如果你仔细并理解了闭包，那么你可能就会有以下的想法了

for(var i = 0; i < click_pops.length; i ++){
$('#'+click_pops[i]).on('click',(function(i){
return function(){
toItsOwnFunc(i);
}
})(i))
}

这里就是用了闭包做了处理了，我们传入一个局部变量i，这样使得每次都是真的在为第i个元素绑定事件。

说到绑定事件，原生的绑定事件是这样的

function addEvent(obj,type,handle){
try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{  // IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e){  // 早期浏览器
obj['on' + type] = handle;
}
}
}