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 相关文章推荐
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
js中new一个对象的过程
Feb 20 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 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之COOKIE支持详解
2010/09/20 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
js prototype截取字符串函数
2010/04/01 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
js密码强度检测
2016/01/07 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
python滑块验证码的破解实现
2019/11/10 Python
Python callable内置函数原理解析
2020/03/05 Python
Python如何用filter函数筛选数据
2020/03/05 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
智能钱包:Ekster
2019/11/21 全球购物
大学生交通专业求职信
2014/09/01 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
污染环境建议书
2015/09/14 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server
5个实用的JavaScript新特性
2022/06/16 Javascript