js循环动态绑定带参数函数

众所周知，不带参数的绑定非常简单，只要使用（语法：“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"). οnchange=function(){modifyFunction (obj,i););。 
绑定成功，OK。不过，慢，此时又遇到了第二个问题，传递过去的参数值都是同一个，并不是想象中的将i的值传递过去后，每个绑定的函数的参数值都不一样。 
于是乎，上网百度。经过艰难的搜索测试，期间还找到一个如下所示的例子： 

复制代码代码如下:

<script> 
document.οnclick=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利用循环绑定事件的例子： 

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

<ul id="list"> <li>第1条记录</li> <li>第2条记录</li> <li>第3条记录</li> <li>第4条记录</li> <li>第5条记录</li> <li>第6条记录</li> </ul> 

<script type="text/javascript"> 

var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 

for (var i = 0; i <= list_obj.length; i++) { 

list_obj[i].onmousemove = function() { 

        this.style.backgroundColor = "#cdcdcd"; } 

list_obj[i].onmouseout = function() { 

this.style.backgroundColor = "#FFFFFF"; } } </script> 

这个例子循环为一组对象绑定事件处理函数。 
但是，如果我们在这个基础上增加一些需求。比如在点击某一条记录的时候弹出这是第几条记录？ 

肯能你会理所当然的这么写： 

<ul id="list"> 
<li>第1条记录</li> 
<li>第2条记录</li> 
<li>第3条记录</li> 
<li>第4条记录</li> 
<li>第5条记录</li> 
<li>第6条记录</li> 
</ul> 
<script type="text/javascript"> 
var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 
for (var i = 0; i <= list_obj.length; i++) { 
list_obj[i].onmousemove = function() { 
this.style.backgroundColor = "#cdcdcd"; 
} 
list_obj[i].onmouseout = function() { 
this.style.backgroundColor = "#FFFFFF"; 
} 
list_obj[i].onclick = function() { 
alert("这是第" + i + "记录"); 
} 
} 
</script>

测试一下你会发现alert出来的都是：这是第6记录 
其实这里for循环已将整个列表循环了一遍，并执行了i++，所以这里i变成了6， 
有什么好的办法解决这个问题吗？ 
那就是闭包了，个人认为闭包是js中最难捉摸的地方之一， 
看看什么是闭包： 
闭包时是指内层的函数可以引用存在与包围他的函数内的变量，即使外层的函数的执行已经终止。 

这个例子中我们可以这样做： 

<ul id="list"> 
<li>第1条记录</li> 
<li>第2条记录</li> 
<li>第3条记录</li> 
<li>第4条记录</li> 
<li>第5条记录</li> 
<li>第6条记录</li> 
</ul> 
<script type="text/javascript"> 
function tt(nob) { 
this.clickFunc = function() { 
alert("这是第" + (nob + 1) + "记录"); 
} 
} 
var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 
for (var i = 0; i <= list_obj.length; i++) { 
list_obj[i].onmousemove = function() { 
this.style.backgroundColor = "#cdcdcd"; 
} 
list_obj[i].onmouseout = function() { 
this.style.backgroundColor = "#FFFFFF"; 
} 
var col = new tt(i); 
list_obj[i].onclick = col.clickFunc; 
} 
</script> 

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

转自：http://www.jb51.net/article/25268.htm