|
锁定老帖子 主题：JS参数传递的问题
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (9)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-05-12
最后修改：2010-05-14
请看下面代码 <!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。 向大家请教下，这个参数传递过程。。
----------------------------------------------- 追加------------------------------------------------------------------ 看了些文章，这样理解的
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-05-12
利用闭包激发作用域
|
| 返回顶楼 | |
|
发表时间：2010-05-13
楼上能说的详细点吗？
|
| 返回顶楼 | |
|
发表时间：2010-05-13
最后修改：2010-05-13
addEventHandler( _list[kk], "click" , function(){ alert(kk);} );
这里的kk始终等于kk的最终值。可以这样写 for( var kk = 0 ; kk < _count ; kk++ ){
(function(k) {
addEventHandler( _list[k], "click" , function(){ alert(k);} );
})(kk)
}
|
| 返回顶楼 | |
|
发表时间：2010-05-13
i_love_sc 写道
addEventHandler( _list[kk], "click" , function(){ alert(kk);} );
这里的kk始终等于kk的最终值。可以这样写 for( var kk = 0 ; kk < _count ; kk++ ){
(function(k) {
addEventHandler( _list[k], "click" , function(){ alert(k);} );
})(kk)
}
|
| 返回顶楼 | |
|
发表时间：2010-05-13
看了些文章，这样理解的
在每次for迭代的时候，这样的语句 “addEventHandler( _list[kk], "click" ,function(){ alert(kk);} ); ” 中的function(){ alert(kk);} 并没有被执行，只是构建了一个函数体为”alert(kk);”的函数对象。 所以当再次调用的时候，这时的kk已经最后的一个值。 我想问，为什么这句就不执行？ 是因为闭包的原因，这句“alert(kk);”才不执行吗？ |
| 返回顶楼 | |
|
发表时间：2010-05-13
将function(){ alert(kk);} 改为这样的function(evt){
var evt= evt||window.event; var element = evt.srcElement||evt.target; alert(element.innerHTML); }也可以 |
| 返回顶楼 | |
|
发表时间：2010-05-13
又是这个问题，解决方式有6种，见http://snandy.iteye.com/blog/250073
|
| 返回顶楼 | |
|
发表时间：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>
再度构建闭包就可以了 |
| 返回顶楼 | |
|
发表时间：2010-05-13
闭包有什么用，楼主的需求是好例子
|
| 返回顶楼 | |
