位置: 编程技术 - 正文

js闭包引起的事件注册问题介绍(js闭包的应用)

编辑:rootadmin

推荐整理分享js闭包引起的事件注册问题介绍(js闭包的应用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js闭包的应用,js中闭包,js闭包的典型应用场景,js闭包作用问题解决应用,js闭包解决什么问题,js闭包的原理,js闭包作用问题解决应用,js闭包作用问题解决应用,内容如对您有帮助,希望把文章链接给更多的朋友!

背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码:

按照正常的想法,结果应该是点击3个按钮分别提示“anchor1”、“anchor2”、“anchor3”;期初我也是这么认为的,但是结果却是不管点击哪个按钮,都会提示“anchor4”。

这是为什么呢?不要着急,待我们慢慢分析,这里面包含js作用域链与闭包的知识,在这里我就不详细介绍了。

首先我们看这个anchor.onclick,这是什么?这是dom0级事件处理程序啊,废话,我也知道,博主是蛇精病吗*************不要吵了,我想说的是这个anchor.onclick

是一个事件处理程序的声明,就像var name="小明"一样,这是声明了,但是还没有执行,这就是关键,我们将上面的js代码修改一下再来看看:

js闭包引起的事件注册问题介绍(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中apply、call和bind的使用区别 在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之处:1、都是用来改变函数的t

浅析JS原型继承与类的继承 我们先看JS类的继承!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"titleJS类的继承/title/headbody/*--类式继承--*/scripttype="text/javascript"//先声明一个超类varAnimal=function(name){this.

关于cookie的初识和运用(js和jq) cookie是什么---------------------------------------------------cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控

本文链接地址:https://www.jiuchutong.com/biancheng/370006.html 转载请保留说明!

上一篇:javascript实现方法调用与方法触发小结(js方法)

下一篇:浅析JS原型继承与类的继承(js原型继承和构造继承)

免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

鄂ICP备2023003026号

网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

友情链接: 武汉网站建设 电脑维修 湖南楚通运网络