`

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>
<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);”才不执行吗?

分享到:
评论
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 &lt; _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 &lt; _count ; kk++ ){ 
(function(k) {
addEventHandler( _list[k],  "click" ,  function(){ alert(k);}   );
})(kk)
       
}  </pre>
2 楼 xuganggogo 2010-05-13  
楼上能说的详细点吗?
1 楼 lyang0000 2010-05-12  
利用闭包激发作用域

相关推荐

    js对话框传递参数

    在JavaScript中,通过对话框进行参数传递是一种常见的交互方式,尤其在需要弹出一个模态对话框并与其进行数据交换的场景下更为常见。本文将详细介绍如何利用`window.showModalDialog()`方法来实现这种参数传递,并...

    页面跳转js获取传递的参数

    在Web开发过程中,页面间的跳转及参数传递是极为常见的需求之一。本文将详细介绍几种通过JavaScript实现页面跳转并获取传递参数的方法。 #### 方法一:使用`window.location.href` ```javascript // 通过修改当前...

    如何给javascript js事件传递参数.zip_jsp js

    如何给javascript js事件传递参数.zip

    JavaScript函数参数使用带参数名的方式赋值传入的方法

    为了解决这一问题,JavaScript引入了一种更加直观的参数传递方式——使用带参数名的方式赋值传入。 在使用带参数名的方式赋值传入时,可以在调用函数时直接指定参数名称和对应的值,这样就不需要担心参数的顺序问题...

    js文件传递参数及js文件的源码

    在 JavaScript 中,实现参数传递的方式有多种,包括 URL 参数传递、Cookie 传递、Session 传递等。在本文中,我们将详细介绍如何在 JS 文件中传递参数,以及如何在 JS 文件中访问这些参数。 参数传递的重要性 在 ...

    android原生和js交互传递参数 包含特殊字符

    android原生和js交互传递参数 包含特殊字符 例如"\'"等情况 避免Uncaught SyntaxError: missing ) after argument list 避免JSON.parse失败等情况 利于快速和webview交互 加速开发过程

    kettle实现多参数传递并且循环加载数据.zip

    本项目"Kettle实现多参数传递并且循环加载数据.zip"显然是一个利用Kettle解决复杂业务逻辑的示例,特别关注了参数传递和数据的循环处理。以下将详细解释相关知识点。 1. **Kettle参数传递**: 在Kettle中,参数...

    xsl javascript 传递参数

    在这个主题“xsl javascript 传递参数”中,我们将深入探讨如何在XSL转换过程中通过JavaScript传递参数,并利用XPath进行数据定位。 首先,XML是结构化数据的存储格式,它允许开发者定义自己的标签来组织数据。XSL...

    访问网站的参数传递代码

    2. **Ajax异步请求**:使用JavaScript的XMLHttpRequest对象或现代浏览器的Fetch API,可以向服务器发送POST请求,同时保持页面不刷新,实现参数传递。 **三、Cookie和Session的使用** 1. **Cookie**:服务器可以...

    两个网页之间参数传递例子

    在互联网应用中,网页间的参数传递是至关重要的,它使得用户在浏览不同页面时能够保持信息的连贯性。这个例子将深入探讨几种常见的网页间参数传递方法,以帮助你理解这一关键概念。 首先,我们有URL查询字符串。当...

    HTML页面地址栏参数传递与获取

    ### HTML页面地址栏参数传递与获取 #### 一、引言 在Web开发中,经常需要在不同页面间传递参数,以实现数据共享或状态保持等...在实际应用中,应根据具体需求合理选择参数传递方式,并注意相关的安全性和兼容性问题。

    Android原生java语句 和html js互相调用 传递参数

    本教程将详细介绍如何在Android中通过Java语句与HTML中的JavaScript进行互调,并传递参数。 首先,我们需要在Android项目中引入`WebView`组件。在XML布局文件中添加一个`WebView`: ```xml android:id="@+id/...

    js处理地址栏传递参数

    js处理地址栏传递参数,有时候遇见中文编码很麻烦,这个写了个统用的方法

    frame之间进行参数传递例子

    比如,敏感数据应该加密后再传递,避免使用全局变量,防止跨域请求的安全问题,以及合理设计API接口以减少不必要的参数传递。 6. **示例代码**:在Java Web环境中,使用Spring MVC的一个简单示例: ```java // ...

    url传递的参数值中包含&时,url自动截断问题的解决方法

    在做一个公告浏览功能时,只要通过url传递的某参数值中包含 & 或 ,就会出现问题–该变量的值无法显示。 问题定位结果: 遇到&时,该参数的值会自动截断,导致参数值传递有误。 二、问题的解决 java代码中做如下...

    浅谈JavaScript 函数参数传递到底是值传递还是引用传递

    JavaScript中的函数参数传递机制一直以来都是开发者讨论的热点。在传统观念中,JavaScript的参数传递常被误解为引用传递,即类似C++或C中的指针传递。然而,JavaScript的实现其实更为复杂,它包含了值传递和引用传递...

    使用一般参数传递方式,实现简单计算器的加减乘除后端接口功能。

    本主题聚焦于使用“一般参数传递方式”来创建一个能够处理加、减、乘、除运算的后端接口。这里我们将深入探讨如何实现这个功能,并通过具体的HTTP请求地址`Http://localhost:8080/simplecalculator`来演示其工作原理...

    解决JS传递中文乱码问题

    3. **URL参数传递**:在URL中传递含有中文的参数。 #### 二、问题分析 乱码产生的根本原因在于字符编码不一致或编码转换错误。具体来说,在数据传输过程中涉及到以下几个关键环节: 1. **客户端编码**:前端页面...

    【JavaScript源代码】Vue router传递参数并解决刷新页面参数丢失问题.docx

    在 Vue Router 中,有多种传递参数的方式,包括通过 `params` 和 `query`。这里我们将详细探讨这两种方式以及如何解决刷新页面时参数丢失的问题。 1. **通过 `params` 传递参数** 当我们使用 `params` 传递参数时...

    JSP中js传递和解析URL参数以及中文转码和解码问题.docx

    #### 二、URL参数传递 在JSP中,通常使用JavaScript来动态构建URL并传递参数。以下是一个典型的例子: ```javascript // 构建参数字符串 var pmt = 'sensor=' + encodeURI(encodeURI(sensor)) + 'device=' + ...

Global site tag (gtag.js) - Google Analytics