背景：闲暇时间看了几篇关于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闭包引起的事件注册问题的更多相关文章

  1. js闭包 选择器 面向对象 事件 操作页面

    闭包js函数的嵌套定义,定义在内部的函数 就称之为闭包为什么使用闭包: 1.一个函数要使用另一个函数的局部变量 2.闭包会持久化包裹自身的函数的局部变量 3.解决循环绑定 function outer ...

  2. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  3. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  4. js闭包和ie内存泄露原理

    也议 js闭包和ie内存泄露原理 可以, 但小心使用. 闭包也许是 JS 中最有用的特性了. 有一份比较好的介绍闭包原理的文档. 有一点需要牢记, 闭包保留了一个指向它封闭作用域的指针, 所以, 在给 ...

  5. JavaScript利用闭包循环绑定事件

    我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href=& ...

  6. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  7. 关于js闭包之小问题大错误

    闭包是 JavaScript 开发的一个关键方面:匿名函数可以访问父级作用域的变量. 如果闭包的作用域中保存着一个 HTML 元素,则该元素无法被销毁.(下面代码来自高程) 刚看到一个关于闭包自己没注 ...

  8. js调用.net后台事件，和后台调用前台等方法总结(转帖)

    js调用.net后台事件,和后台调用前台等方法总结 原文来自:http://hi.baidu.com/xiaowei0705/blog/item/4d56163f5e4bf616bba16725.ht ...

  9. Node.js实战(九)之事件循环

    Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高. Node.js 几乎每一个 API 都是支持回调函数的. Node ...

随机推荐

  1. 关于datagridview自动增加行高度和显示全部内容的设置

    this.dataGridView1.AutoSizeRowsMode = DataGridViewAutoSizeRowsMode.AllCellsExceptHeaders;  //自动调动dat ...

  2. Python基础学习七 网络编程

    主要应用urllib和requests模块 urllib模块返回类型为bytes,需要数据类型转换:requests就方便很多. 例子1:发送post请求 url = 'http://api.nnzh ...

  3. POJ3017

    题意 将一段序列分割为任意段,每一段的连续和不超过M,使得每一段最大值的和最小. 分析 用单调队列进行优化的dp.单调队列可以维护可以影响当前区间的最大值. #include <cstdio&g ...

  4. 算法描述》关于LIS的nlogn方法

    上次TYVJ有一道裸LIS,然而我当时直接打了一个N^2暴力就草草了事,然后就ZZ了,只拿了60分,其实NlogN的LIS和N^2的差的不多,只是没有N^2,好想罢了,鉴于某学弟的要求,所以就重现一下 ...

  5. iis8不支持 aspnet_regiis.exe -iru 命令的解决办法

    服务器版的限制,我看你给的提示说也可以使用 dism.exe 命令行. C:\> DISM /Online /Enable-Feature /FeatureName:WCF-HTTP-Activ ...

  6. Opencv3 Mat对象构造函数与常用方法

    构造函数 Mat() Mat(int rows,int cols,int type) Mat(Size size,int type) Mat(int rows,int cols,int type,co ...

  7. 如何学习MySQL

    转自高手的帖子 1.坚持阅读官方手册,看MySQL书籍作用不会特别大:(挑选跟工作相关的内容优先阅读,例如InnoDB存储引擎,MySQL复制,查询优化) 2.阅读官方手册,同时对阅读的内容做对应的测 ...

  8. boost 时间与日期处理

    博客转载自: 类 特点 缺点 说明 timer 计时基类 不适合大跨度时间 适用大部分的普通计时 progress_timer 继承自timer 可以自动写入流中 只精确到0.01s 如果需要更精确, ...

  9. jQuery基础教程-第8章-001Adding new global functions

    一. 1.To add a function to the jQuery namespace, we can just assign the new function asa property of ...

  10. （转）【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    原文地址:http://www.cnblogs.com/huyong/p/3334848.html 在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于 ...