JavaScript循环动态绑定带参数函数及闭包问题解决方案

JavaScript循环绑定事件传参问题

通常，为不带参数的元素绑定事件十分简单，只需直接引用函数名即可。例如使用 attachEvent 方法：document.getElementById("对象ID名").attachEvent("事件名，如onchange", 函数名); 具体示例为 document.getElementById("select_0").attachEvent("onchange", modifyFunction);。以下示例均省略 getElementById 部分。

若需传递参数，绑定过程则相对复杂。一种写法是在匿名函数中调用目标函数：document.getElementById("select_0").attachEvent("onchange", function(){ modifyFunction(obj, i); });。另一种写法是直接赋值：document.getElementById("select_0").onchange = function(){ modifyFunction(obj, 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 的值仍存在问题：无论操作哪个 select，获取到的值始终是最后一个。

继续搜索解决方案。

最终在一篇文章中找到原因，该文转载如下：

闭包机制与解决方案

我们先看一个关于Javascript利用循环绑定事件的例子：

例如：一个不确定长度的列表，在鼠标经过某一条的时候改变背景。

 <!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> <title>Untitled Page</title> </head> <body> <ul id="list"> <li>第1条记录</li> <li>第2条记录</li> <li>第3条记录</li> <li>第4条记录</li> <li>第5条记录</li> <li>第6条记录</li> </ul>  </body> </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> <title>Untitled Page</title> </head> <body> <ul id="list"> <li>第1条记录</li> <li>第2条记录</li> <li>第3条记录</li> <li>第4条记录</li> <li>第5条记录</li> <li>第6条记录</li> </ul>  </body> </html> 

测试一下你会发现alert出来的都是：这是第6记录

其实这里for循环已将整个列表循环了一遍，并执行了i++，所以这里i变成了6，

有什么好的办法解决这个问题吗？

那就是闭包了，个人认为闭包是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> <title>Untitled Page</title> </head> <body> <ul id="list"> <li>第1条记录</li> <li>第2条记录</li> <li>第3条记录</li> <li>第4条记录</li> <li>第5条记录</li> <li>第6条记录</li> </ul>  </body> </html> 

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();