javascript闭包使用：解决循环绑定事件问题

最新推荐文章于 2021-12-01 16:55:41 发布

weixin_34096182

最新推荐文章于 2021-12-01 16:55:41 发布

阅读量241

点赞数

文章标签： javascript xhtml python ViewUI

原文链接：https://my.oschina.net/hehongbo/blog/350810

版权

2019独角兽企业重金招聘Python工程师标准>>>

在使用js给标签批量绑定事件时，一般使用循环动态的绑定，但是绑定事件时，一般会引用一个匿名函数，在匿名函数中使用循环出来的变量，如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div1" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m1" class="mask"/>
</div>
<hr>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div2" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m2" class="mask"/>
</div>
<hr>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div3" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m3" class="mask"/>
</div>

<script type="text/javascript">
var div = document.getElementsByClassName("img");
var mask = document.getElementsByClassName("mask");
for(var i=0;i<div.length;i++){
 
  div[i].onmouseover = function()
  {
   mask[i].style.opacity = "1";
   mask[i].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)"
  }
  div[i].onmouseout = function()
  {
   mask[i].style.opacity = "0";
   mask[i].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)"
  }
}
 
</script>
</body>
</html>

上面代码中，绑定onmouseover和onmouseout事件的时候，都使用匿名函数，而匿名函数内也都使用到了for循环的变量值i，执行代码后，只有最后那个div成功的绑定了事件。

这是因为内部函数在使用外部变量时使用引用的方式而不是复制，就是说我给每个节点设置onmouseover和onmouseout事件的时候将i的引用传递给了mask数组，当我点击节点触发onmouseover和onmouseout事件的时候，i的值已经变成了节点总数。。。

解决办法是使用闭包：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div1" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m1" class="mask"/>
</div>
<hr>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div2" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m2" class="mask"/>
</div>
<hr>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div3" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m3" class="mask"/>
</div>
<script type="text/javascript">
var div = document.getElementsByClassName("img");
var mask = document.getElementsByClassName("mask");
for(var i=0;i<div.length;i++){
 /*
  之所以用到闭包，原因是：内部函数在使用外部变量时使用引用的方式，其实相当于java中的引用传递，而非值传递。传递进来的引用只相当于一个指针，指向的是一个内存地址，这个内存地址存放的才是具体的值，而外面的循环会不断的修改这个存放地址中的值，所以最后循环结束之后，参数的值只能找到最后一个。 
 */
 (function(){
  var p = i;
  div[p].onmouseover = function()
  {
   mask[p].style.opacity = "1";
   mask[p].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)"
  }
  div[p].onmouseout = function()
  {
   mask[p].style.opacity = "0";
   mask[p].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)"
  }
 })(); 
}
</script>
</body>
</html>

修改后之所以正确是因为此时传进去的是i的值的复制，不会因为外部函数改变而改变。

问题的关键是：子函数需要使用父函数中的局部变量

解决的办法就是使用闭包！

转载于:https://my.oschina.net/hehongbo/blog/350810