JavaScript中循环给元素添加onclick事件局部变量的值均相同的怪异现象

博客专家认证

2016-09-02 10:19:57

请参考如下代码，为何任意点击任意一个span弹出的都是2？



<!doctype html>



<html>

	<head>

	</head>

	<body>

	<div id="testDiv">

		<span>lvlv0</span>

		<span>lvlv1</span>

	</div>

	</body>

</html>

<script>

function closure(){

	var localVar=1;

	var div=document.getElementById("testDiv");

	var spanArray=div.getElementsByTagName("span");

	for(var i=0;i<spanArray.length;++i){

		spanArray[i].onclick=function(){

			var nestedLocalVar=i;

			alert(nestedLocalVar);

		};

	}

	//alert(nestedLocalVar);

}

closure();

</script>

我知道这个存在闭包和作用域链的问题，但是如果因作用域链的话，但是nestedLocalVar是事件函数中的局部变量，为何还是指向了最终的变量i呢？

...全文

373 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

jio可 2016-09-02

打赏
举报

点击的时候循环已经执行完了,但最后还要去执行i++ ，i就等于2了,你点击的时候用的还是上面个声明的i,它已经是2了。

逝_去_的_光_阴 2016-09-02

打赏
举报

引用 5 楼 K346K346 的回复:

嗯嗯，知道这两个解决办法，但是出现上面的问题的原因是什么呢？

var nestedLocalVar=i;因为你的i一直在变

恋喵大鲤鱼 2016-09-02

打赏
举报

引用楼主 K346K346 的回复:

请参考如下代码，为何任意点击任意一个span弹出的都是2？
<!doctype html>

<html>
	<head>
	</head>
	<body>
	<div id="testDiv">
		<span>lvlv0</span>
		<span>lvlv1</span>
	</div>
	</body>
</html>
<script>
function closure(){
	var localVar=1;
	var div=document.getElementById("testDiv");
	var spanArray=div.getElementsByTagName("span");
	for(var i=0;i<spanArray.length;++i){
		spanArray[i].onclick=function(){
			var nestedLocalVar=i;
			alert(nestedLocalVar);
		};
	}
	//alert(nestedLocalVar);
}
closure();
</script>
我知道这个存在闭包和作用域链的问题，但是如果因作用域链的话，但是nestedLocalVar是事件函数中的局部变量，为何还是指向了最终的变量i呢？

嗯嗯，知道这两个解决办法，但是出现上面的问题的原因是什么呢？

恋喵大鲤鱼 2016-09-02

打赏
举报

引用楼主 K346K346 的回复:

请参考如下代码，为何任意点击任意一个span弹出的都是2？
<!doctype html>

<html>
	<head>
	</head>
	<body>
	<div id="testDiv">
		<span>lvlv0</span>
		<span>lvlv1</span>
	</div>
	</body>
</html>
<script>
function closure(){
	var localVar=1;
	var div=document.getElementById("testDiv");
	var spanArray=div.getElementsByTagName("span");
	for(var i=0;i<spanArray.length;++i){
		spanArray[i].onclick=function(){
			var nestedLocalVar=i;
			alert(nestedLocalVar);
		};
	}
	//alert(nestedLocalVar);
}
closure();
</script>
我知道这个存在闭包和作用域链的问题，但是如果因作用域链的话，但是nestedLocalVar是事件函数中的局部变量，为何还是指向了最终的变量i呢？

｛在事件响应的时候，已经指向了循环的最后值｝，为什么会指向循环变量 i 的最后值呢？

逝_去_的_光_阴 2016-09-02

打赏
举报

纯js就用匿名闭包函数，特点定义完立即执行


function closure(){
    var localVar=1;
    var div=document.getElementById("testDiv");
    var spanArray=div.getElementsByTagName("span");
    for(var i=0;i<spanArray.length;++i){
    	(function (x) {
    		spanArray[x].onclick = function () { 
    		alert(x);
    		}
    	})(i);
    }
    //alert(nestedLocalVar);
}
closure();

斯洛文尼亚旅游 2016-09-02

打赏
举报


    for (var i = 0; i < spanArray.length; ++i) {
        spanArray[i].onclick = (function (i) {
            return function () { alert(i); }
        })(i);
    }

人生难得一只鸡 2016-09-02

打赏
举报

在事件响应的时候，已经指向了循环的最后值你可以闭包实现，或者简单的循环时赋给span的一个属性上，点击时调取对象的属性值

恋喵大鲤鱼 2016-09-02

打赏
举报

引用 5 楼 K346K346 的回复:

[quote=引用楼主 K346K346 的回复:] 请参考如下代码，为何任意点击任意一个span弹出的都是2？
<!doctype html>

<html>
	<head>
	</head>
	<body>
	<div id="testDiv">
		<span>lvlv0</span>
		<span>lvlv1</span>
	</div>
	</body>
</html>
<script>
function closure(){
	var localVar=1;
	var div=document.getElementById("testDiv");
	var spanArray=div.getElementsByTagName("span");
	for(var i=0;i<spanArray.length;++i){
		spanArray[i].onclick=function(){
			var nestedLocalVar=i;
			alert(nestedLocalVar);
		};
	}
	//alert(nestedLocalVar);
}
closure();
</script>
我知道这个存在闭包和作用域链的问题，但是如果因作用域链的话，但是nestedLocalVar是事件函数中的局部变量，为何还是指向了最终的变量i呢？

嗯嗯，知道这两个解决办法，但是出现上面的问题的原因是什么呢？[/quote]我想问的是为什么nestedLocalVar指向 i 呢？