javascript中循环加载监听事件的闭包问题

最新推荐文章于 2024-09-16 09:30:00 发布

show_code

最新推荐文章于 2024-09-16 09:30:00 发布

阅读量5.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/playboyanta123/article/details/17241597

Web前端专栏收录该内容

74 篇文章

订阅专栏

本文探讨了在JavaScript中给DOM元素循环加载监听事件时遇到的闭包问题，特别是如何正确处理变量i的值。提供了两种解决方案：一是通过给对象添加属性来保存当前的i值；二是利用闭包特性解决闭包自身引发的问题。

Javascript中的闭包跟自身带来的强大的功能，但是这仅仅是限于知道怎么用它的人，如果不懂其原理，那么自己写的代码就会经常遇到闭包所影响的变量作用域问题，下面说说我个人遇到的一个问题，也是一般人都会遇到的问题吧，就是给DOM中的元素循环加载监听事件的时候，i变量值的问题。

看代码：

var aDivs = document.getElementsByTagName('div');//获取多个div集合
for(var i=0; i<aDivs.length; i++){
      aDivs[i].onclick=function(){
           alert(i);
	}
}

可以发现上面弹出的结果都是aDivs的长度，而不是预期的一些从小到大的数，这里就是因为闭包的问题影响的i的取值。解决办法有下面两个：

第一个方式很简单，如下：

var aDivs = document.getElementsByTagName('div');//获取多个div集合
for(var i=0; i<aDivs.length; i++){
	aDivs[i].index = i;
      aDivs[i].onclick=function(){
           alert(this.index);
	}
}

第二种方式如下：

var aDivs = document.getElementsByTagName('div');//获取多个div集合
for(var i=0; i<aDivs.length; i++){
      add(i);
}
function add(i){	
	aDivs[i].onclick=function(){
           alert(i);
	}
}

第一种方式使用给对象添加变量的方式解决了问题，就是每次把i保存下来作为对象的一个属性；第二种方式就是利用闭包解决了闭包本身带来的问题。