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为例：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