用户名:   密码:    忘记密码  注册
我推信息网 > 学习园地 > 正文

用js给对象循环添加事件时因为闭包不能传值的办法

2010年6月26日
信息简介:我想给网站里所有的图片增加滚动鼠标中键可放大和缩小图片的JS事件,因为不可能在原来的图片里都加上onmousewheel事件代码,只有用JS查询所有图片对象动态添加, 但由于闭包问题,编者弄了一个下午都没搞定,网上这方面的资料也少,不过功夫不负有心人,终于还是在CSDN里找到了一个解决方法
用js给对象循环添加事件时因为闭包不能传值的办法

事件:我想给网站里所有的图片增加滚动鼠标中键可放大和缩小图片的JS事件,因为不可能在原来的图片里都加上onmousewheel事件代码,只有用JS查询所有图片对象动态添加,
但由于闭包问题,编者弄了一个下午都没搞定,网上这方面的资料也少,不过功夫不负有心人,终于还是在CSDN里找到了一个解决方法

我的代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body><img id="q1" src="s:\1.jpg" width="448" height="346" /><br />
<br />
<br />
<br /><img id="q2" src="s:\1.jpg" width="440" height="346" /><br />
<br />
<br /><img id="q3" src="s:\1.jpg" width="440" height="346" /><br />
<script type="text/javascript">
//定义图片最大宽度
var BodyWidth=400;

document.onreadystatechange=function()
{
 if (document.readyState == "complete")
 {
  var ObjSum=parseInt(window.document.images.length,10);
  for(i=0; i<ObjSum; i++)
  {
   var imgObj=window.document.images.item(i);
   if (imgObj.width>BodyWidth){imgObj.width=BodyWidth;}
   
   
   //由于闭包原因,出现问题
   /*
   imgObj.onmousewheel=function img(i){
    var obj=imgObj;
    alert(i);
    var values=parseInt(obj.style.zoom,10)||100;
    values+=window.event.wheelDelta/12;
    if (values>0) obj.style.zoom=values+'%';
    return false;
   }
   document.getElementById('图片名称').onclick = function(){ showNewWin(eqpID)};
   
   (
    function(eqpID)
    {
      document.getElementById(eqpNameEn).onclick = function(){ showNewWin(eqpID)}
    }
   )(eqpID)
   
   a.push(function(){f(i)});
   a.push((function(x){return function(){f(x)};})(i));

   */
   
   imgObj.onmousewheel=((function(imgObj){return function(){return img(imgObj)}})(imgObj));
  }
 }
}
function img(obj)
{
 var values=parseInt(obj.style.zoom,10)||100;
 values+=window.event.wheelDelta/12;
 if (values>0) obj.style.zoom=values+'%';
 return false;
 }
</script>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</body>
</html>

为了大家好学习 我将所找资料的原文发出来:
     js给多个图片添加事件时的传值问题(很急)
给多个图片添加事件,传递的参数却没办法改变.

for(int i;i <10;i++)
{
  var eqpID = i;//eqpID取值
  alert(eqpID);//这里可以看到每次循环取到的值是不同的
  document.getElementById('图片名称').onclick = function(){ showNewWin(eqpID)};
}

function showNewWin(eqpID)
{
  alert(eqpID);//但是这里看到的却是同一个值,都是上面循环的最后一个值
  window.open("../EqpManager/ShowAttribute.aspx?eqpID=" + eqpID,'newwindow',
        "height=450, width=400, top=250px, left=250px, toolbar=no, menubar=no");
}

有人知道吗?谢谢了。很着急。

这个问题常会遇到!
JavaScript中没有块作用域,意思就是,像for循环里的变量,它们的作用域仍然是循环所在的函数主体中或再往上,而不存在每次for会保留一个值,如:
<script type="text/javascript">

var a = [];

var f = function(n){alert(n);};

for(var i=0;i<3;i++){
    a.push(
function(){f(i)});//这个时候i是引用,在f执行时,找到的是循环结束后的i
}

for(var b=0;b<a.length;b++){
    a[b]();
//找到的i是上上面循环结束后的i
}
处理方法 利用闭包:

<script type="text/javascript">

var a = [];

var f = function(n){alert(n);};

for(var i=0;i<3;i++){
    a.push((
function(x){return function(){f(x)};})(i));
}

for(var b=0;b<a.length;b++){
    a[b]();
}
</script>
处理方式2 with与闭包的等同性
<script type="text/javascript">

var a = [];

var f = function(n){alert(n);};

for(var i=0;i<3;i++){
   
with({i:i}){
        a.push(
function(){f(i)});
    }
}

for(var b=0;b<a.length;b++){
    a[b]();
}
</script>


谢谢啊,找到答案了,跟你的这个方法应该是一样的。
(function(eqpID){
  document.getElementById(eqpNameEn).onclick = function(){ showNewWin(eqpID)}})(eqpID)
有人说是做一个闭包,将eqpID这个参数固定在function里面。

OK,事情搞定,现在来把他加在网站上试看看 我推信息网www.wotui.net
(阅览次数:15827次)【关闭
上一条: .NET语言的选择,C#,VB.Net,C++,JScript
下一条: js 与或运算符 || && 用法 妙用
你认为此条信息得分为:
0% 100% 0% 0% 0%
很好 一般 不行
验证字符:
网友昵称: (Ctrl+Enter)
发表评论:
以下评论只代表网友个人观点,不代表我单位观点 [查看全部]
共2条记录 每页10条   9 7 [1] 8 : 共1页∴ YHL
 匿名网友  在 2010-6-26 23:43:42 发表评论  IP:222.209.106.*
 办法不错
支持(0) 反对(0)
 www.lfs024.com  在 2012-7-23 13:40:01 发表评论  IP:121.199.246.*
 很好
支持(0) 反对(0)
共2条记录 每页10条   9 7 [1] 8 : 共1页∴ YHL
网站首页 -  政策法规 -  联系我们 -  免责申明 -  时尚一族 -  友情链接 -  关于我们 -  设为首页 -  加入收藏
版权所有:我推信息网 关键字:我推信息网 wotui 我推荐 我推
域 名:www.wotui.net 联系QQ (08:30-22:00在线): 邮 箱:yahali@sina.com
中华人民共和国电信与信息服务业务经营许可证

 

 

 

 

公共信息安全网络监察

经营性网站备案信息

不良信息举报中心 中国文明网络传播