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


Posted in Javascript onMarch 29, 2016

背景:闲暇时间看了几篇关于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;

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

看到了吧,我们通过debugger让循环在i==2时停止,然后又去控制台手动触发#anchor1和#anchor2的点击事件,结果控制台打印“anchor2”。

整个的逻辑大致是这样的:anchor.onclick一直保存着i的引用,i在循环中是一直变化的,从i=1到i=4;虽然在循环的过程中,anchor.onclick曾经保存过(注意“曾经”两字),

1,2,3这三种情况,但是i最终变成了4,所以说,无论点击哪个按钮,都会输出“anchor4”

结语:js中作用域链与闭包的知识很重要,虽然在此没有讲,其实是害怕讲不明白,反而误导了大家

以上这篇js闭包引起的事件注册问题介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Node.js文件操作详解
Aug 16 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
javascript实现时钟动画
Dec 03 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 #Javascript
js滚动条平滑移动示例代码
Mar 29 #Javascript
JavaScript头像上传插件源码分享
Mar 29 #Javascript
js解决movebox移动问题
Mar 29 #Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 #Javascript
分析js闭包引起的事件注册问题
Mar 29 #Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 #Javascript
You might like
PHP的5个安全措施小结
2012/07/17 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
php实现留言板功能
2017/03/05 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
全球度假村:Club Med
2017/11/27 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
小加工厂管理制度
2014/01/21 职场文书
优秀教师事迹简介
2014/02/02 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
上课说话检讨书500字
2014/11/01 职场文书