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;
看到了吧，我们通过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中的substr()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了JavaScript语言的基本语法要求要学习好JavaScript，首先我们要懂JavaScript语言的一些基本语法要求，感兴趣的小伙伴们可以参考一下2015-11-11
字符替换是一个非常重要的功能，javascript 中有一个 String.replace( )，但是此方法有很多不为新手所知的妙用，如果用的好了，可以为您节省很多宝贵时间，还等什么？马上进来看看吧！2009-09-09
javascript 进阶篇1 正则表达式，cookie管理，userData
接下来开始我们的进阶之路,更实用的技巧分享2012-03-03
js代码运行不出来的情况在项目中经常发生，究竟是什么原因呢？在本文整理了一些常见的情况，感兴趣的各位朋友可以参考下2013-10-10
JavaScript方法和技巧大全...2006-12-12
简介JavaScript中用于处理正切的Math.tan()方法
这篇文章主要介绍了简介JavaScript中用于处理正切的Math.tan()方法,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
js资料toString 方法...2007-03-03
JavaScript中的document.referrer在各种浏览器测试结果
这篇文章主要介绍了JavaScript中的document.referrer在各种浏览器测试结果,包括在多种情况下每个浏览器能否用document.referrer取到值,非常珍贵的测试结果,需要的朋友可以参考下2014-07-07
javascript开发技术大全－第1章javascript概述
JavaScript 为 HTML 设计师提供了一种编程工具HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。2011-07-07
最新评论