Js中作用域对于数组绑定事件的影响

Js中作用域对于数组绑定事件的影响

Js中，分割作用域的只有函数，也就是说，当你没有进入一个函数内，那么你当前的作用域，你当前的this指针，和其他的变量都是由外围函数管理。

首先我们看一段代码

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

这里很明显这是想给一个img图片数组统一添加一个点击事件，为了验证事件是否添加成功，就打印一下图片路径，但是很明显，这段代码不能运行，原因有两点：

首先我们说过，在js中只有函数可以分割作用域，所以实际上，变量 I 是定义在全局的，也就是说，for结束后，i还存在，那么i的值是多少呢？一定是imgs.length，因为最后i还加了一次，所以，这时候你点击一张图片，打印的不是这张图片的src，而是imgs[imgs.length]这张图片的src，很显然，这张图片不可能存在。自然也就打印不出来，那么事件绑定上了吗？绑定上了，一会会验证。

那么，如果把调用事件的对象换成this可以吗？

很显然也不可以，因为for并不分割作用域，即便在for内，你依然是全局的，this并不指代imgs的元素，但是，同样的，在onclick绑定的事件函数内，就不一样了，请看下面的代码

for(var i = 0;i<imgCont.length;i++){
    imgs[i].onclick = function(){
        alert(this.src);
    };
}

因为函数可以分割作用域，所以，在onclick绑定的匿名函数中，他的this实际上就是调用对象，也就是imgs的某一元素，这时，用this即可指代事件对象，也就可以完成对数组元素绑定事件。

那么如何拿到索引呢？如果两个数组联动，索引是必不可少的，用原生Js可以在for循环内给每一个元素设置一个index属性，并把i传给他：

for(var i = 0;i<imgCont.length;i++){
    imgs[i].index =I;
    imgs[i].onclick = function(){
        //alert(this.src);
    };
}