JS实现循环给元素绑定事件的几个常用方法
来源:互联网 发布:origin最新版软件 编辑:程序博客网 时间:2024/04/28 13:03
作为一个JS的初学者,想对一些元素循环绑定事件的时候总是出现各种问题,尤其是在对闭包没有熟练掌握的时候更是一头雾水。网上一查,果然好多初学者有这个困惑,既然这个问题总是出现,于是在我就总结了以下两个比较好理解的解决方案,分享给大家:(可能还有更好的方式我没有发现,请各位前辈分享)
比如下面这个例子:
HTML代码:
<div class="wrap"> <a href="javascript:;" class="link">第一个链接</a> <a href="javascript:;" class="link">第二个链接</a> <a href="javascript:;" class="link">第三个链接</a></div>
JS代码:
window.onload = function() { var aLi = document.getElementsByTagName("a"); for(var i = 0; i < aLi.length; i++) { aLi[i].onclick = function() { alert(i); //3 } }}
运行结果:
发现不管点哪个链接都是弹出“3”,其实在我们调用onclick函数时候,外层循环结束已经结束了,i值结束为3跳出。
那其实换句话说,只要我们能把这个i值动态传到onclick函数里不就可以了。
解决方案一(给aLi一个count用于记录位置):
window.onload = function() { var aLi = document.getElementsByTagName("a"); for(var i = 0; i < aLi.length; i++) { aLi[i].count = i; aLi[i].onclick = function() { alert(this.count); } } }
解决方案二(可以循环给绑定事件的函数动态传入参数,闭包的经典例子):
window.onload = function() { var aLi = document.getElementsByTagName("a"); for(var i = 0; i < aLi.length; i++) {var a = function(k) { aLi[k].onclick = function() {alert(k); }}a(i); } }
如有错误请指出,谢谢
1 0
- JS实现循环给元素绑定事件的几个常用方法
- jquery的几个元素绑定事件方法
- 用Jquery循环的给元素绑定事件
- 循环中给元素绑定事件
- js中元素的事件绑定以及常用事件
- js关于给动态生成的元素绑定事件
- js给dom元素绑定事件的三种方式
- 第24篇:AngularJS实现给动态生成的元素绑定事件的方法
- js 给元素绑定键盘回车事件
- js 给未来元素绑定事件
- jQuery给动态添加的元素绑定事件的方法
- jQuery给动态添加的元素绑定事件的方法
- jQuery给动态添加的元素绑定事件的方法
- jQuery给动态添加的元素绑定事件的方法
- JS中for循环出现的问题:如何给li元素绑定事件,点击每个li元素弹出对应的索引?
- JS实现对DOM元素事件的绑定
- js中的事件(给元素绑定事件)
- 给动态添加的元素绑定事件
- java IO 流操作
- 6.0权限认证
- 创建远程线程实现DLL注入
- netfilter入门
- 第一行代码 读笔⑤ (Broadcast)
- JS实现循环给元素绑定事件的几个常用方法
- Linux监视显卡使用情况
- Runtime(一)
- 命令ln的使用 以及 查看软件是否安装
- C++ Primer Plus编程练习7.13-5
- Mysql命令备忘
- 关于指针的一些总结
- 库函数之字符串
- 窗体程序调C写DLL(其中调C++写DLL),Runtime Error