dom元素循环绑定事件的技巧

　　以前总觉得自己写的代码不太规范，尤其是写原生的时候。举个例子：

　　要为页面上所有".a"的元素绑定事件，当然了用jquery很方便：$('.a').bind("click",fn);

原生的话，我们很多会这样写：

　　

for(var i=0;i<length;i++){
elem[i].onclick=function(x){return function(){}}(i);
}

　　　　但是如果，我要连续绑定两个事件呢？

for(var i=0;i<length;i++){
elem[i].onmouseenter=function(x){

return function(){}

}(i); elem[i].onmouseout=function(x){

return function(){}

}(i); }

　　好吧，到目前为止这种写法都木有问题，但是,如果我要在绑定的这个函数中进行关联计算呢？如enter后+1，out后—1，继续：

var num=[0,0,0];
for(var i=0;i<length;i++){
elem[i].onmouseenter=function(x){
return function(){num[x]++};
}(i);
elem[i].onmouseout=function(x){
return function(){num[x]--；conle.log(num[i]);};
}(i);
}

　　我们引入了一个数组，也就是三个num结合闭包来解决问题，为什么？因为不得不这么做，如果只用一个num就不同元素事件触发后num的值就混乱了。那么我们来换一种写法。

　　

Array.prototype.forEach.call(elems,function(elem,i){
　　var num;
　　elem.onmouseenter=function(){num++};

　　elem.onmousout=function(){num--；consle.log(num)};

});

　　是不是简单多了，第一、不用闭包了，第二、需要用统一的数组来管理了。为什么呢？因为上面的写法其实是吧事件绑定统一放在各自的匿名函数中。js会自动对每个num进行缓存，节省了命名空域。

　　类似的如果事件绑定之间存在大量的相互运算(time,num等)，并且需要循环绑定，都可以采用这种方法，简单高效!