无为清净楼资源网 Design By www.qnjia.com
众所周知,不带参数的绑定非常简单,只要使用(语法:“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利用循环绑定事件的例子:
例如:一个不确定长度的列表,在鼠标经过某一条的时候改变背景。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这个例子循环为一组对象绑定事件处理函数。
但是,如果我们在这个基础上增加一些需求。比如在点击某一条记录的时候弹出这是第几条记录?
肯能你会理所当然的这么写:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
测试一下你会发现alert出来的都是:这是第6记录
其实这里for循环已将整个列表循环了一遍,并执行了i++,所以这里i变成了6,
有什么好的办法解决这个问题吗?
那就是闭包了,个人认为闭包是js中最难捉摸的地方之一,
看看什么是闭包:
闭包时是指内层的函数可以引用存在与包围他的函数内的变量,即使外层的函数的执行已经终止。
这个例子中我们可以这样做:
[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();
带参数的绑定就要复杂一些: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利用循环绑定事件的例子:
例如:一个不确定长度的列表,在鼠标经过某一条的时候改变背景。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这个例子循环为一组对象绑定事件处理函数。
但是,如果我们在这个基础上增加一些需求。比如在点击某一条记录的时候弹出这是第几条记录?
肯能你会理所当然的这么写:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
测试一下你会发现alert出来的都是:这是第6记录
其实这里for循环已将整个列表循环了一遍,并执行了i++,所以这里i变成了6,
有什么好的办法解决这个问题吗?
那就是闭包了,个人认为闭包是js中最难捉摸的地方之一,
看看什么是闭包:
闭包时是指内层的函数可以引用存在与包围他的函数内的变量,即使外层的函数的执行已经终止。
这个例子中我们可以这样做:
[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();
标签:
动态绑定,带参数函数
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月17日
2024年11月17日
- 中国武警男声合唱团《辉煌之声1天路》[DTS-WAV分轨]
- 紫薇《旧曲新韵》[320K/MP3][175.29MB]
- 紫薇《旧曲新韵》[FLAC/分轨][550.18MB]
- 周深《反深代词》[先听版][320K/MP3][72.71MB]
- 李佳薇.2024-会发光的【黑籁音乐】【FLAC分轨】
- 后弦.2012-很有爱【天浩盛世】【WAV+CUE】
- 林俊吉.2012-将你惜命命【美华】【WAV+CUE】
- 晓雅《分享》DTS-WAV
- 黑鸭子2008-飞歌[首版][WAV+CUE]
- 黄乙玲1989-水泼落地难收回[日本天龙版][WAV+CUE]
- 周深《反深代词》[先听版][FLAC/分轨][310.97MB]
- 姜育恒1984《什么时候·串起又散落》台湾复刻版[WAV+CUE][1G]
- 那英《如今》引进版[WAV+CUE][1G]
- 蔡幸娟.1991-真的让我爱你吗【飞碟】【WAV+CUE】
- 群星.2024-好团圆电视剧原声带【TME】【FLAC分轨】