首页 > 代码库 > js中关于动态添加事件,不能使用循环变量的问题

js中关于动态添加事件,不能使用循环变量的问题

在编写事件的时候,我们难免会遇到以下这种情况:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
<li>内容四</li>
<li>内容五</li>
<li>内容六</li>
</ul>
</body>
<script>
window.onload=function(){
var oli = document.getElementsByTagName(‘li‘);
for (var i = 0; i < oli.length; i++) {
oli[i].onclick=function(){
alert(i);
}
}
}
</script>
</html>
每次点击都会弹出6,而不是0,1,2,3,4,5,6
这是什么原因造成的呢?
    下面做下分析:因为在for循环里面指定给oli[i].onclick的事件处理程序,也就是onclick那个匿名函数是在for循环执行完成后(用户单击链接时)才被调用的。
  而调用时,需要对变量i求值,解析程序首先会在事件处理程序内部查找,但i没有定义。然后,又到方法外部去查找,此时有定义,但i的值是6(只有i大于6才会停止执行for循环)。
  因此,就会取得该值——这正是闭包(匿名函数)要使用其外部作用域中变量的结果。而且,这也是由于匿名函数本身无法传递参数(故而无法维护自己的作用域)造成的。
怎么解决这个问题呢?
方案一、我们可以采用给对象自定义属性的方法;代码如下:
var oli = document.getElementsByTagName(‘li‘);
for (var i = 0; i < oli.length; i++) {
oli[i].index=i;
oli[i].onclick=function(){
alert(this.index);
}
}
再次运行,我们会发现,此时依次点击就会弹出0,1,2,3,4,5;

方案二、采用闭包的思

var oli = document.getElementsByTagName(‘li‘);
for (var i = 0; i <= oli.length; i++) {
(function(i){

oli[i].onclick = function() {
alert(i);
}
})(i);
}
同样解决问题




js中关于动态添加事件,不能使用循环变量的问题