JS参数传递的问题

xuganggogo

浏览: 448574 次
性别:
来自: 长沙

最近访客更多访客>>

kuang_yu

denny.zhao

lhc98

zhouxiangflying8003

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

JavaScript XHTML CSS HTML 浏览器

请看下面代码

<!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>js參數傳遞問題</title>
<script type="text/javascript">
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};
function addEventHandler(oTarget, sEventType, fnHandler) {
	if (oTarget.addEventListener) {
		oTarget.addEventListener(sEventType, fnHandler, false);
	} else if (oTarget.attachEvent) {
		oTarget.attachEvent("on" + sEventType, fnHandler);
	} else {
		oTarget["on" + sEventType] = fnHandler;
	}
};
</script>

<style type="text/css">
#idGlideView div{width:500px;height:50px;}
</style>
</head>
<body>
<div id="idGlideView">
  <div style="background-color:#006699;"> <a href="/">1111111</a> </div>
  <div style="background-color:#FF9933;"> <a href="/">2222222</a> </div>
  <div style="background-color:#9999FF;"> <a href="/">3333333</a> </div>
  <div style="background-color:#006699;"> <a href="/">4444444</a> </div>
  <div style="background-color:#FF9933;"> <a href="/">5555555</a> </div>
  <div style="background-color:#9999FF;"> <a href="/">6666666</a> </div>
</div>
<script type="text/javascript">
function addClickForAll(){
	var _div =  $("idGlideView");
	var _list =_div.getElementsByTagName("div");
	var _count = _list.length;
	for( var kk = 0 ; kk < _count ; kk++ ){
		addEventHandler( _list[kk],  "click" ,  function(){ alert(kk);}   );
	}
}
addClickForAll();
</script>
</body>
</html>

我想把点击每个层，就alert出对应的1，2，3，4，5，6

但是这样循环添加事件，alert出来的就都是6。

向大家请教下，这个参数传递过程。。

----------------------------------------------- 追加------------------------------------------------------------------

看了些文章，这样理解的
在每次for迭代的时候，这样的语句 “addEventHandler( _list[kk], "click" ,function(){ alert(kk);} ); ”
中的function(){ alert(kk);}
并没有被执行，只是构建了一个函数体为”alert(kk);”的函数对象。
所以当再次调用的时候，这时的kk已经最后的一个值。

我想问，为什么这句 “alert(kk);” 就不执行？
是因为闭包的原因，这句“alert(kk);”才不执行吗？

分享到：

換行css | spring+hibernate，数据库插入图片

2010-05-12 11:47
浏览 1589
评论(13)
论坛回复 / 浏览 (13 / 9219)
分类:Web前端
查看更多

13 楼 lipeng88213 2010-05-27

呵呵又见闭包

12 楼 bellstar 2010-05-18

问问题到问答就好了

11 楼 eclipse07 2010-05-18

ff3下执行弹出正常，ie6下只弹出一个框之后浏览器就崩溃了。不过没出现楼主的问题

10 楼 xuganggogo 2010-05-14

zhouyrt 写道

又是这个问题，解决方式有6种，见http://snandy.iteye.com/blog/250073

谢谢，你的方法很多很不错。
能帮我解答追加的问题么？

9 楼 highzhu 2010-05-13

闭包有什么用，楼主的需求是好例子

8 楼 rainsilence 2010-05-13

<!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>  
<script type="text/javascript">  
var $ = function (id) {  
    return "string" == typeof id ? document.getElementById(id) : id;  
};  
function addEventHandler(oTarget, sEventType, fnHandler) {  
    if (oTarget.addEventListener) {  
        oTarget.addEventListener(sEventType, fnHandler, false);  
    } else if (oTarget.attachEvent) {  
        oTarget.attachEvent("on" + sEventType, fnHandler);  
    } else {  
        oTarget["on" + sEventType] = fnHandler;  
    }  
};  
</script>  
  
<style type="text/css">  
#idGlideView div{width:500px;height:50px;}  
</style>  
</head>  
<body>  
<div id="idGlideView">  
  <div style="background-color:#006699;"> <a href="/">1111111</a> </div>  
  <div style="background-color:#FF9933;"> <a href="/">2222222</a> </div>  
  <div style="background-color:#9999FF;"> <a href="/">3333333</a> </div>  
  <div style="background-color:#006699;"> <a href="/">4444444</a> </div>  
  <div style="background-color:#FF9933;"> <a href="/">5555555</a> </div>  
  <div style="background-color:#9999FF;"> <a href="/">6666666</a> </div>  
</div>  
<script type="text/javascript">  
function addClickForAll(){  
    var _div =  $("idGlideView");  
    var _list =_div.getElementsByTagName("div");  
    var _count = _list.length;  
    for( var kk = 0 ; kk < _count ; kk++ ){
        addEventHandler( _list[kk],  "click" ,  
			function(k) {
				return function(){ alert(k);}
			}(kk));  
    }
}  
addClickForAll();  
</script>  
</body>  
</html>

再度构建闭包就可以了

7 楼 zhouyrt 2010-05-13

又是这个问题，解决方式有6种，见http://snandy.iteye.com/blog/250073

6 楼 sxpyrgz 2010-05-13

将function(){ alert(kk);} 改为这样的function(evt){
var evt= evt||window.event;
var element = evt.srcElement||evt.target;
alert(element.innerHTML);
}也可以

5 楼 xuganggogo 2010-05-13

看了些文章，这样理解的
在每次for迭代的时候，这样的语句 “addEventHandler( _list[kk], "click" ,function(){ alert(kk);} ); ”
中的function(){ alert(kk);}
并没有被执行，只是构建了一个函数体为”alert(kk);”的函数对象。
所以当再次调用的时候，这时的kk已经最后的一个值。

我想问，为什么这句就不执行？
是因为闭包的原因，这句“alert(kk);”才不执行吗？

4 楼 xuganggogo 2010-05-13

<div class="quote_title">i_love_sc 写道</div>
<div class="quote_div">
<pre name="code" class="js">addEventHandler( _list[kk], "click" , function(){ alert(kk);}   ); </pre>
<p> 这里的kk始终等于kk的最终值。可以这样写</p>
<pre name="code" class="js">for( var kk = 0 ; kk < _count ; kk++ ){
(function(k) {
addEventHandler( _list[k], "click" , function(){ alert(k);}   );
})(kk)

} </pre>
</div>
<p><br>小弟不才，你这种写法我没有见过，连语法我都没看懂。能详细解释下吗？</p>

3 楼 i_love_sc 2010-05-13

<pre name="code" class="js">addEventHandler( _list[kk], "click" , function(){ alert(kk);}   ); </pre>
<p> 这里的kk始终等于kk的最终值。可以这样写</p>
<pre name="code" class="js">for( var kk = 0 ; kk < _count ; kk++ ){
(function(k) {
addEventHandler( _list[k], "click" , function(){ alert(k);}   );
})(kk)

} </pre>

2 楼 xuganggogo 2010-05-13

楼上能说的详细点吗？

1 楼 lyang0000 2010-05-12

利用闭包激发作用域

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论