众所周知,不带参数的绑定非常简单,只要使用(语法:“document.getElementById("对象ID名").attachEvent("事件名,如onchange",函数名);”)(示例:“document.getElementById("select_0").attachEvent("onchange",modifyFunction);”)即可。(注:以下只写示例) 带参数的绑定就要复杂一些:document.getElementById("select _0").attachEvent("onchange",function(){modifyFunction (obj,i););即在function()中写需要执行的函数即可。当然还有另一种写法:document.getElementById("select _0"). onchange=function(){modifyFunction (obj,i););。 绑定成功,OK。不过,慢,此时又遇到了第二个问题,传递过去的参数值都是同一个,并不是想象中的将i的值传递过去后,每个绑定的函数的参数值都不一样。 于是乎,上网百度。经过艰难的搜索测试,期间还找到一个如下所示的例子: 复制代码 代码如下: <script> document.onclick=check; function check() { if(event.srcElement.type== "button ") alert(event.srcElement.name); } </script> <input type=button name=button1> <input type=button name=button2> 此例子是通过event找到有动作的组件,然后获取它的源,再取出name值。这样就可以通过传入的obj,获得是第几个obj,然后进行相应的操作。 只是还有个问题,经过这种操作之后,obj的值又出现了问题,不管操作哪个select,获得的值都是最后一个。 继续百度。 终于,在一篇文章中获得了原因。文章转帖如下: 我们先看一个关于Javascript利用循环绑定事件的例子: 例如:一个不确定长度的列表,在鼠标经过某一条的时候改变背景。
Untitled Page
第1条记录
第2条记录
第3条记录
第4条记录
第5条记录
第6条记录
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 这个例子循环为一组对象绑定事件处理函数。 但是,如果我们在这个基础上增加一些需求。比如在点击某一条记录的时候弹出这是第几条记录? 肯能你会理所当然的这么写:
Untitled Page
第1条记录
第2条记录
第3条记录
第4条记录
第5条记录
第6条记录
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 测试一下你会发现alert出来的都是:这是第6记录 其实这里for循环已将整个列表循环了一遍,并执行了i++,所以这里i变成了6, 有什么好的办法解决这个问题吗? 那就是闭包了,个人认为闭包是js中最难捉摸的地方之一, 看看什么是闭包: 闭包时是指内层的函数可以引用存在与包围他的函数内的变量,即使外层的函数的执行已经终止。 这个例子中我们可以这样做:
Untitled Page
第1条记录
第2条记录
第3条记录
第4条记录
第5条记录
第6条记录
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] PS:闭包很难,很复杂! 经过以上文章可以得知,引起这个问题的原因其实是因为js的闭包难题。按照面向对象的JAVA语言的理解可以解释为:js循环动态绑定带参数函数中的参数,其实相当于java中的引用传递,而非值传递。传递进来的引用只相当于一个指针,指向的是一个内存地址,这个内存地址存放的才是具体的值,而外面的循环会不断的修改这个存放地址中的值,所以最后循环结束之后,参数的值只能找到最后一个。 知道了原因就很好解决了。New一个新的“函数类”(姑且这么称呼吧)。测试OK。一下是修改后的代码: 复制代码 代码如下: //在新增按钮上绑定函数 document.getElementById("add").attachEvent("onclick",addFunction); var jc_count = 0;//定义需要改变第几行的值 function txzmcFunction(x,y){//下拉框中绑定的函数 var sql="select txzjc from dm_txzmc where dm='"+x.value+"'";//取得下拉框中的代码,通过ajax获得相应的中文名称 jc_count = y;//定义当前行是第几行 ajaxSelect(sql,"txzjcFunction");//封装的ajax函数 } function txzjcFunction(x){//接收封装的ajax函数返回值,并赋值 document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_txzjc_"+jc_count).value=x; } function bb(dx,sz){//解决动态绑定闭包问题要用到函数 this.clickFunc=function(){ txzmcFunction(dx,sz);//调用相应的函数 } } function addFunction(){ //动态循环绑定 var count=document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_maxcount").value;//获取最大的行数 for (var i=0;i<count ;i++ )//循环绑定 { var obj=document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_txzmc_" +i); var tp = new bb(obj,i);//解决闭包问题,new一个新的函数类 obj.onchange = tp.clickFunc; } } //显示页面时执行一次 addFunction();
推荐阅读
将string解析为json的几种方式小结
1.比较古老的方法: 复制代码 代码如下: function strToJson(str){ var json = eval('(' + str + ')'); return json; } 2.比较常用的方法: 复制代码 代码如下: function strToJson(str){ return (new Function("re>>>详细阅读
本文标题:js循环动态绑定带参数函数遇到的问题及解决方案[转]
地址:http://www.17bianji.com/kaifa2/JS/25430.html
1/2 1