js闭包引起的事件注册问题介绍
2016-03-29 15:56
477 查看
背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码:
<!DOCTYPE html> <html> <head> <title>js闭包</title> <meta charset="utf-8" /> </head> <body> <button id="anchor1">1</button> <button id="anchor2">2</button> <button id="anchor3">3</button> <script type="text/javascript" src="jquery-1.12.1.js"></script> <script type="text/javascript"> function pageLoad(){ for (var i = 1; i <=3; i++) { var anchor = document.getElementById("anchor" + i); anchor.onclick = function () { console.log("anchor"+i); } } } window.onload = pageLoad; </script> </body> </html>
按照正常的想法,结果应该是点击3个按钮分别提示“anchor1”、“anchor2”、“anchor3”;期初我也是这么认为的,但是结果却是不管点击哪个按钮,都会提示“anchor4”。
这是为什么呢?不要着急,待我们慢慢分析,这里面包含js作用域链与闭包的知识,在这里我就不详细介绍了。
首先我们看这个anchor.onclick,这是什么?这是dom0级事件处理程序啊,废话,我也知道,博主是蛇精病吗*************不要吵了,我想说的是这个anchor.onclick
是一个事件处理程序的声明,就像var name="小明"一样,这是声明了,但是还没有执行,这就是关键,我们将上面的js代码修改一下再来看看:
function pageLoad(){ for (var i = 1; i <=3; i++) { var anchor = document.getElementById("anchor" + i); anchor.onclick = function () { console.log("anchor"+i); } if(i==2){ debugger;//我们在这里debugger一下,然后在控制台手动触发#anchor1和#anchor2的点击事件 } } } window.onload = pageLoad;
看到了吧,我们通过debugger让循环在i==2时停止,然后又去控制台手动触发#anchor1和#anchor2的点击事件,结果控制台打印“anchor2”。
整个的逻辑大致是这样的:anchor.onclick一直保存着i的引用,i在循环中是一直变化的,从i=1到i=4;虽然在循环的过程中,anchor.onclick曾经保存过(注意“曾经”两字),
1,2,3这三种情况,但是i最终变成了4,所以说,无论点击哪个按钮,都会输出“anchor4”
结语:js中作用域链与闭包的知识很重要,虽然在此没有讲,其实是害怕讲不明白,反而误导了大家
以上这篇js闭包引起的事件注册问题介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Extjs4.0 最新最全视频教程
- 深入理解PHP之匿名函数
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- 最后一次说说闭包
- js数组实现图片轮播
- js可突破windows弹退效果代码
- Ruby中使用Block、Proc、lambda实现闭包
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- LUA中的闭包(closure)浅析
- Lua中的闭包学习笔记
- js显示当前星期的起止日期的脚本
- C#中函数的创建和闭包的理解
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例