众所周知,不带参数的绑定非常简单,只要使用(语法:“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利用循环绑定事件的例子:
例如:一个不确定长度的列表,在鼠标经过某一条的时候改变背景。
<!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> <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> </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> <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> </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> <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> </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();
refurl:http://www.jb51.net/article/25268.htm
相关推荐
Delphi 动态绑定事件 指定事件处理函数过程 绑事事件自定义函数过程 测试完全可用,含源码文本.
Delphi中StringGrid动态绑定下拉列表
详细介绍了java动态绑定和静态绑定的区别
深入理解C++的动态绑定和静态绑定 静态绑定:绑定的对象的静态类型,某特性(比如函数)依赖于对象的静态类型,发生在编译期。 动态绑定:绑定的对象的动态类型,某特性(比如函数)依赖于对象的动态类型,发生在...
java实现对echarts 属性全动态设置 数据动态绑定。封装echarts 的绘图方法,使得js只需要getLine(data),getBar(data)等就可以绘制图形。echarts上的所有属性都可以在java中设置。
今天小编就为大家分享一篇layui动态绑定事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
动态绑定DataGridView 动态绑定DataGridView
完美的数据报表reportViewer动态绑定DataTable数据, 1.创建窗体form1 2.拖入reportViewer1 3.解决方案中添加-数据-数据集(dataset1)-工具栏中拖入DataTable到xsd界面-添加列 DataColumn1-DataColumn4 4.解决方案...
wpf 动态绑定不在项目中的图片
dataGridView读取文件列名和数据库字段名称,文件列名作为原始列(固定的),数据库字段列(动态下拉框)。一个设定关系导入功能
WinForm中动态绑定TreeView数据 收藏 根据数据库中的记录,动态生成树。从而进行删减。
实现动态绑定ASPxGridView,根据选择数据库的不同,加载不同的表,从而操作不同数据库
遍历CheckBoxList,获得选中项的值动态绑定CheckBoxList, 遍历CheckBoxList,获得选中项的值动态绑定CheckBoxList。
DataGrid动态绑定ComboBox <DataGridComboBoxColumn.EditingElementStyle>
treeview动态数据绑定,撒打发库单据发呆打卡机发送到房间啊
IP绑定,修改MAC地址,路由配置等
JComboBox动态绑定数据库实例,数据库为Sql2000,使用JDBC连接数据库
1、讲解和演示动态绑定与静态绑定的概念与原理; 2、讲解和演示虚析构函数的概念与原理,并讲解为什么构造函数不能使用虚函数的原因;
1.input 输入框 v-model 绑定的字段名需要根据后台返回的数据动态生成,此时就不可以用 v-model绑定,而是用传统的方法 value 动态绑定,并且用子组件绑定向父组件传递值和事件。 代码如下: //子组件 <input ...
利用bind+dhcpd实现域名动态绑定