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

时间:2021-11-21 07:15:17

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

  要为页面上所有".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等),并且需要循环绑定,都可以采用这种方法,简单高效!