js中onclick的存在的问题？

Question

1. var Nav = document.getElementById('nav').getElementsByTagName('li');      for (var i = 0; i < Nav.length; i++) {          Nav[i].onclick = function (event) {              alert(i);          }      }2. for (var i = 0; i <6； i++) {          alert(i);   }为什么我第一个js中点击一个按钮 然后打印出i的值  为什么i的值一直打印出来的值是5；不应该像2这样从1到5一个个打印出来吗？

Answer 1

闭包：

for (var i = 0; i < Nav.length; i++) {
	(function(index){
		Nav[i].onclick = function (event) {
			alert(index);
		}
	})(i)
}

绑到属性上

for (var i = 0; i < Nav.length; i++) {
	Nav[i].index=i;
	Nav[i].onclick = function (event) {
		alert(this.index);
	}
}

以下两点大白话可以帮助你理解：

1. 每循环一次，可以理解为代码复制一份；

2. 函数执行的时候函数内参数才会被赋给实际的值。

以你写的代码1为例：

i=0时：

Nav[0].onclick = function (event) {
	alert(i);
}

i=1时：

Nav[1].onclick = function (event) {
	alert(i);
}

……

当点击时,函数执行，为i赋值，此时作用域内i=Nav.length，所以弹出的都是Nav.length。

Answer 2

代码绑定的时候i是从1到5的，但是当onclick执行的时候，是执行function(event){alert(i)}这段代码，此时的i已经执行完循环以后的值了，所以是5