当前位置: 欧洲杯竞猜 > 服务器运维 > 正文

js循环动态绑定带参数函数境遇的主题材料及建设

时间:2019-12-26 04:31来源:服务器运维
分明,不带参数的绑定非常轻便,只要使用(语法:“document.getElementById.attach伊芙nt;”)(示例:“document.getElementById.attach伊夫nt("onchange",modifyFunction卡塔尔;”)就能够。带参数的绑定

分明,不带参数的绑定非常轻便,只要使用(语法:“document.getElementById.attach伊芙nt;”)(示例:“document.getElementById.attach伊夫nt("onchange",modifyFunction卡塔尔;”)就能够。 带参数的绑定将要复杂一些:document.getElementById.attachEvent{modifyFunction 中写须要推行的函数就可以。当然还应该有另大器晚成种写法:document.getElementById. onchange=function(卡塔尔(قطر‎{modifyFunction ;。 绑定成功,OK。不过,慢,这时又超越了首个难题,传递过去的参数值都以同三个,并非想象中的将i的值传递过去后,各种绑定的函数的参数值都不大器晚成致。 于是乎,上网百度。经过劳苦的搜索测量检验,时期还找到贰个之类所示的例子: 复制代码 代码如下:

咱俩先看贰个有关Javascript利用循环绑定事件的事例:

此例子是经过event找到有动作的组件,然后拿走它的源,再收取name值。那样就足以经过传播的obj,得到是第多少个obj,然后开展对应的操作。 只是还大概有个难点,经过这种操作之后,obj的值又出新了难点,不管操作哪个select,获得的值都以末了叁个。 继续百度。 终于,在生机勃勃篇文章中拿走了原因。文章转帖如下: 大家先看四个有关Javascript利用循环绑定事件的事例: 举个例子:二个不鲜明长度的列表,在鼠标经过某一条的时候改动背景。

例如:二个不分明长度的列表,在鼠标经过某一条的时候修正背景。

Untitled Page

﹤!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "  
﹤html xmlns="" ﹥  
﹤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"卡塔尔(英语:State of Qatar); //获取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﹥

第1条记录 第2条记录 第3条记录 第4条记录 第5条记录 第6条记录

以此例子循环为大器晚成组对象绑定事件管理函数。

[Ctrl A 全选 注:如需引进外界Js需刷新才具推行] 那几个例子循环为意气风发组对象绑定事件管理函数。 但是,假如我们在此个底工上加码一些必要。举例在点击某一条记下的时候弹出那是第几条记下? 肯能你会理当如此的如此写:

不过,若是我们在此个基本功上加码部分必要。举个例子在点击某一条记下的时候弹出那是第几条记下?

Untitled Page

可能您会理所必然的那样写:

第1条记录 第2条记录 第3条记录 第4条记录 第5条记录 第6条记录

﹤!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "  
﹤html xmlns="" ﹥  
﹤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﹥

[Ctrl A 全选 注:如需引进外界Js需刷新手艺试行] 测验一下你会意识alert出来的都是:那是第6记录 其实这里for循环已将整个列表循环了三回,并施行了i ,所以那边i形成了6, 有啥样好的法子缓和这一个难点吧? 那便是闭包了,个人以为闭包是js中最难捉摸之处之生龙活虎, 看看哪些是闭包: 闭包时是指内层的函数能够援用存在与包围他的函数内的变量,尽管外层的函数的实践已经告意气风发段落。 这一个例子中大家能够这么做:

测验一下您会发现alert出来的都以:这是第6记录

Untitled Page

事实上这里for循环已将整个列表循环了三遍,并施行了i ,所以这里i形成了6,

第1条记录 第2条记录 第3条记录 第4条记录 第5条记录 第6条记录

有何样好的主意解决这几个难题呢?

[Ctrl A 全选 注:如需引进外界Js需刷新本领实践] PS:闭包很难,很复杂! 经过以上随笔能够查出,引起这几个标题的因由实在是因为js的闭包难题。依据面向对象的JAVA语言的知情能够分解为:js循环动态绑定带参数函数中的参数,其实一定于java中的引用传递,而非值传递。传递步入的引用只相当于二个指南针,指向的是一个内存地址,这一个内部存款和储蓄器地址寄放的才是具体的值,而外面包车型大巴循环会不断的改变这么些贮存地方中的值,所以最终循环甘休之后,参数的值只可以找到最终一个。 知道了通首至尾的经过就很好灭绝了。New叁个新的“函数类”。测验OK。一下是校正后的代码: 复制代码 代码如下: //在疯长按键上绑定函数 document.getElementById.attach伊夫nt("onclick",addFunction卡塔尔国; var jc_count = 0;//定义须要退换第几行的值 function txzmcFunction{//下拉框中绑定的函数 var sql="select txzjc from dm_txzmc where dm='" x.value "'";//拿到下拉框中的代码,通过ajax拿到对应的中文名称 jc_count = y;//定义当前进是第几行 ajaxSelect;//封装的ajax函数 } function txzjcFunction{//选拔封装的ajax函数重回值,并赋值 document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_txzjc_" jc_count卡塔尔.value=x; } function bb{//化解动态绑定闭包难点要用到函数 this.clickFunc=function(卡塔尔国{ txzmcFunction;//调用相应的函数 } } function addFunction(卡塔尔(قطر‎{ //动态循环绑定 var count=document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_maxcount"卡塔尔(英语:State of Qatar).value;//获取最大的行数 for (var i=0;i

那正是闭包了,个人感觉闭包是js中最难捉摸的地点之大器晚成,

拜会哪些是闭包:

闭包时是指内层的函数能够援用存在与包围他的函数内的变量,纵然外层的函数的试行已经甘休。

能够查看:

以那一件事例中大家得以如此做:

﹤!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "  
﹤html xmlns="" ﹥  
﹤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"卡塔尔(英语:State of Qatar).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﹥

  1. 在Javascript中落实伪哈希表
  2. JavaScript函数调用的多少个准则
  3. Javascript中的replace方法与正则表明式解说

比如:四个不明显长度的列表,在鼠标经过某一条的时候退换背景。 ﹤!DOCTYPE html P...

编辑:服务器运维 本文来源:js循环动态绑定带参数函数境遇的主题材料及建设

关键词: 欧洲杯竞猜