JavaScript循环绑定事件
2015-03-26 13:10
344 查看
我们有时候需要对变量绑定某个功能相同的函数或者方法,如果是一个两个,直接写就复制粘贴就可以了,可是当绑定的变量很多的时候,显然循环会让它变得更简单.
比如在设计网页的时候,我们对一组li都要绑定点击事件,而点击事件的作用都是相同的.那么循环绑定就比较好.
看着好像没什么问题,当点击 li[0](点击1)的时候似乎应该弹出来0,可是结果却出人意料,每个li点击alert的都是3.这是为什么呢?
我们在绑定li的点击事件时是这样的 li[i].oncick = function(){}这里有问题,因为赋值的是一个匿名函数,而匿名函数不会自执行.循环语句就相当于下面这样:
我们可以看到,数组的索引确实在改变,可是函数体内并没有改变,而还是alert(i);
由于一直没有执行匿名函数,所以for循环会做完,i的值变成3结束.
这个时候当我们点击的时候,i已经循环完变成了3 所以每次点击的时候都是3,需要注意的是,在给li数组赋值的时候并没有触发onclick事件.
那么解决方法如下
匿名函数后加()代表立即执行,也就是说让li[i].onclick = funtion(){}这句话立即执行,执行的结果是什么呢,就是返回了一个函数,而这个函数又把i作为参数传进去,所以循环语句就像下面这样:
这样就利用闭包将事件循环绑定了
注:作者是新手,如果有大牛看到了哪里有不对,希望多多指正,有助于我提高,谢谢
比如在设计网页的时候,我们对一组li都要绑定点击事件,而点击事件的作用都是相同的.那么循环绑定就比较好.
<body> <ul> <li>点击1</li> <li>点击2</li> <li>点击3</li> </ul> //这组li的html代码假设是这样的 </script> //这里是对这个li循环绑定这个点击事件. var li = document.getElementsByTagName("li"); for (var i = 0;i < li.length;i++) { li[i].onclick = function(){ alert(i); } } </script> </body>
看着好像没什么问题,当点击 li[0](点击1)的时候似乎应该弹出来0,可是结果却出人意料,每个li点击alert的都是3.这是为什么呢?
我们在绑定li的点击事件时是这样的 li[i].oncick = function(){}这里有问题,因为赋值的是一个匿名函数,而匿名函数不会自执行.循环语句就相当于下面这样:
li[0].onclick = function(){alert(i);}; li[1].onclick = function(){alert(i);}; li[2].onclick = function(){alert(i);};
我们可以看到,数组的索引确实在改变,可是函数体内并没有改变,而还是alert(i);
由于一直没有执行匿名函数,所以for循环会做完,i的值变成3结束.
这个时候当我们点击的时候,i已经循环完变成了3 所以每次点击的时候都是3,需要注意的是,在给li数组赋值的时候并没有触发onclick事件.
那么解决方法如下
var li = document.getElementsByTagName("li"); for (var i = 0;i < li.length;i++) { li[i].onclick = function(num){ return function(){ alert(num); } }(i); }
匿名函数后加()代表立即执行,也就是说让li[i].onclick = funtion(){}这句话立即执行,执行的结果是什么呢,就是返回了一个函数,而这个函数又把i作为参数传进去,所以循环语句就像下面这样:
li[0].onclick = function(){alert(0);}; li[1].onclick = function(){alert(1);}; li[2].onclick = function(){alert(2);};
这样就利用闭包将事件循环绑定了
注:作者是新手,如果有大牛看到了哪里有不对,希望多多指正,有助于我提高,谢谢
相关文章推荐
- 如果理解Javascript利用闭包循环绑定事件
- javascript中循环绑定监听事件的解决方案
- javascript循环绑定事件,只返回最后一个实例,解决办法
- Javascript循环绑定事件的示例代码
- Javascript利用closure循环绑定事件
- Javascript循环绑定事件的示例代码
- Javascript循环绑定事件 web前端开发博客:http://www.css88.com/
- javascript 循环遍历绑定事件问题
- Javascript利用闭包循环绑定事件
- Javascript循环绑定事件 web前端开发博客:http://www.css88.com/
- Javascript 循环绑定事件
- Javascript利用闭包循环绑定事件
- [转]JAVASCRIPT绑定事件
- 绑定列表循环事件
- JavaScript:按钮事件动态绑定
- JavaScript中绑定事件监听函数的通用方法[ addEvent() ]
- JavaScript中为事件句柄绑定监听函数
- JavaScript事件绑定的方法说明
- javascript事件绑定后this变义问题的解决[prototype1.5.1]
- 书:"Pro JavaScript Techniques 精通JavaScript"之绑定/移除事件监听函数