代码描述:JavaScript批量注册事件 函数索引。JavaScript批量注册事件函数索引代码下载
如果元素较多的时候,批量注册事件处理函数是一个非常便利的事情,但是这个操作往往在初学者中会出现一些问题,最为常见的一个就是,批量注册完毕之后,事件触发之后,如果按照元素的个数作为索引的话,总是显示最后一个索引。 先看一段代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var lis=obox.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].onclick=function(){ alert(i); } } } </script> </head> <body> <ul id="box"> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> <li>51前端四</li> </ul> </body> </html>
以上代码的本意是点击导航栏目的时候能够弹出对应栏目的索引值,但是弹出的确实栏目的数量。 出现以上问题的原因是,使用for循环注册时间处理函数的时候,全局变量i的最终值是4,所以最终弹出值是4。 解决方案一:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var lis=obox.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].index=i; lis[i].onclick=function(){ alert(this.index); } } } </script> </head> <body> <ul id="box"> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> <li>51前端四</li> </ul> </body> </html>
以上代码实现了我们的要求,实现方式非常的简单,就是将每一次循环时i的值赋给当前li的自定义属性index,弹出值就是当前li的自定义属性index的值,因为this是指向当前函数调用对象。 解决方案二:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var lis=obox.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ (function(index){ lis[index].onclick=function(){ alert(index) } })(i) } } </script> </head> <body> <ul id="box"> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> <li>51前端四</li> </ul> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能