JavaScript事件循环

在做幻灯片轮番播放效果中，想要为每一个页面指示器按钮创建一个事件，使鼠标经过第一个按钮时显示第一张幻灯片，经过第二个按钮时就显示第二张幻灯片，所以需要为每一个按钮设置一个变量来标识用户响应的是第几个按钮。

当时的设计是这样的：

for(var i=0;i<btns.length;i++){//由于事件函数必须在用户响应之后执行//因此onclick事件内的代码是在循环之后执行而非循环之时执行btns[i].onclick=function(){//此代码在循环之后执行//假如数组长度为5，那么每一个onclick事件触发的i的值都为5，而不是从0开始alert("我是第"+i+"个元素");}}

每一个按钮都有一个onclick事件，并且点击后会提示第几个按钮，但是发现不管怎么点，i的值始终为5（假设有5个元素）。其中最主要的原因是onclick中的代码并没有执行，而是在用户响应之后才开始执行。

于是这段代码其实相当于这样：

for(var i=0;i<5;i++){}//此后i的值始终为5btns[0].onclick=function(){alert(i);}btns[1].onclick=function(){alert(i);}btns[2].onclick=function(){alert(i);}btns[3].onclick=function(){alert(i);}btns[4].onclick=function(){alert(i);}

为了解决这个问题需要有点面向对象的概念，即为每一个按钮设置一个标识属性来存储变量i的值

for(var i=0;i<btns.length;i++){//为btns数组中的每一个元素添加一个now属性//并循环将i的值存储在btns数组中的每一个元素的now属性中btns[i].now=i;btns[i].onclick=function(){//this指向btn[i]alert("我是第"+this.now+"个元素");}}

每一个元素都有一个now属性标识自己