分析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”

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
innerText 使用示例
Jan 23 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 #Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 #Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 #Javascript
JavaScript面向对象程序设计教程
Mar 29 #Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 #Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 #Javascript
Jquery操作cookie记住用户名
Mar 29 #Javascript
You might like
PHP安全配置
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
Symfony生成二维码的方法
2016/02/04 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
python实现用户登陆邮件通知的方法
2015/07/09 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
Python3并发写文件与Python对比
2019/11/20 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
python设置中文界面实例方法
2020/10/27 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
大学生学业生涯规划
2014/01/05 职场文书
银行金融服务方案
2014/06/11 职场文书
教师师德师风整改措施
2014/10/24 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
赞美教师的句子
2019/09/02 职场文书