这篇文章主要为大家分析了 js 闭包引起的事件注册问题,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
背景:闲暇时间看了几篇关于 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"
来源: http://www.phperz.com/article/17/0402/266520.html