js闭包引起的事件注册问题介绍

168 阅读 0 评论 111 点赞

我是靠谱客的博主动听太阳，最近开发中收集的这篇文章主要介绍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;