Problems and solutions encountered in js loop dynamic binding function with parameters [transfer]_javascript skills

As we all know, binding without parameters is very simple, just use (syntax: "document.getElementById("Object ID name").attachEvent("Event name, such as onchange", function name);") (Example: "document. getElementById("select_0").attachEvent("onchange",modifyFunction);"). (Note: The following is only an example)
Binding with parameters is more complicated: document.getElementById("select _0").attachEvent("onchange",function(){modifyFunction (obj,i);); That is, just write the function that needs to be executed in function(). Of course, there is another way to write it: document.getElementById("select _0"). onchange=function(){modifyFunction (obj,i););.
Binding successful, OK. However, slowly, we encountered a second problem at this time. The parameter values ​​passed were all the same. It was not as imagined that after passing the value of i, the parameter values ​​of each bound function would be different.
So, go online to Baidu. After a difficult search and test, I also found an example as shown below:

Copy code The code is as follows:

<script> <br>document.onclick=check; <br>function check() { <br>if(event.srcElement.type== "button ") <br>alert(event.srcElement. name); <br>} <br></script>

This example is to find the component with action through event, then obtain its source, and then extract the name value. In this way, you can get the obj number through the incoming obj, and then perform the corresponding operations.
There is just one problem. After this operation, the value of obj has another problem. No matter which select is operated, the value obtained is the last one.
Continue to Baidu.
Finally, got the reason in one article. The article is reposted as follows:
Let’s first look at an example of Javascript using loop binding events:
For example: a list of indefinite length, changing the background when the mouse passes over a certain item.

<title>Untitled Page</title> <ul id="list"> <li>Record 1</li> <li>Record 2</li> <li>Record 3</li> <li>Record 4</li> <li>Record 5</li> <li>Record 6</li> </ul>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

This example loops into a group Object binding event handler function.
However, if we add some requirements on this basis. For example, when you click on a certain record, which record does it pop up?
Maybe you will write this as a matter of course:

<title> </title>Untitled Page <ul id="list"> <li> </li>Record 1<li> </li>Record 2<li> </li>Record 3<li> </li>Record 4<li> </li>Record 5<li> </li>Record 6</ul>
[Ctrl A select all Note:

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

<title>Untitled Page</title> <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>
[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{
var obj=document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_txzmc_" +i);
var tp = new bb(obj,i);//解决闭包问题，new一个新的函数类
obj.onchange = tp.clickFunc;
}
}
//显示页面时执行一次
addFunction();