网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 分析js闭包引起的事件注册问题
范文
    这篇文章主要为大家分析了js闭包引起的事件注册问题，感兴趣的小伙伴们可以参考一下
    背景：闲暇时间看了几篇关于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”
    以上就是本文的全部内容，希望对大家的学习有所帮助。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/12/16 7:35:00