Javascript循环绑定事件(续)

前几天发表了《Javascript利用闭包(Closure)循环绑定事件》,被转载到了蓝色理想上,http://www.blueidea.com/tech/web/2008/6232.asp,引用蓝色评论中的话:

rukey67 Publish at 2008-10-14 11:55:19
这个问题很早就有很多讨论了
文章里的做法开销也比较大,不是最好的办法·

在评论中我看到新的方法和知识,现在复制过来和大家共享:

1.这是Mr.Lodar的方法:

XML/HTML代码
  1. <!DOCTYPE?html?PUBLIC?”-//W3C//DTD?XHTML?1.0?Transitional//EN”?”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>??? ??
  2. <html?xmlns=“http://www.w3.org/1999/xhtml”?>??? ??
  3. <head>??? ??
  4. ????<title>Untitled?Page</title>??? ??
  5. </head>??? ??
  6. <body>??? ??
  7. <ul?id=“list”>??? ??
  8. <li>第1条记录</li>??? ??
  9. <li>第2条记录</li>??? ??
  10. <li>第3条记录</li>??? ??
  11. <li>第4条记录</li>??? ??
  12. <li>第5条记录</li>??? ??
  13. <li>第6条记录</li>??? ??
  14. </ul>??? ??
  15. <script?type=“text/javascript”>??????? ??
  16. ????var?list_obj?=?document.getElementById(“list”).getElementsByTagName(“li”);?//获取list下面的所有li的对象数组???? ??
  17. ????for?(var?i?=?0;?i?<=?list_obj.length;?i++)?{???? ??
  18. ????????list_obj[i].onmousemove?=?function()?{???? ??
  19. ????????????this.style.backgroundColor?=?“#cdcdcd”;???? ??
  20. ????????}???? ??
  21. ????????list_obj[i].onmouseout?=?function()?{???? ??
  22. ????????????this.style.backgroundColor?=?“#FFFFFF”;???? ??
  23. ????????}???? ??
  24. ????????list_obj[i].onclick?=?new?function(n)?{ ??
  25. ???????????return?function(){alert(“这是第”?+(n+1)+”条记录”);} ??
  26. ??????? }(i); ??
  27. ???? ??
  28. ????}???? ??
  29. </script>??? ??
  30. </body>??? ??
  31. </html>??

2.这是freecat 的方法:

freecat Publish at 2008-10-14 17:15:35
这样更好,闭包是难,但不是你想象那样

?

JavaScript代码
  1. <script?type=“text/javascript”>? ??
  2. var?list_obj?=?document.getElementById(“list”).getElementsByTagName(“li”);?//获取list下面的所有li的对象数组? ??
  3. for?(var?i?=?0;?i?<=?list_obj.length;?i++)?{? ??
  4. (function(){? ??
  5. var?p?=?i ??
  6. list_obj[i].onmousemove?=?function()?{? ??
  7. this.style.backgroundColor?=?“#cdcdcd”;? ??
  8. }? ??
  9. list_obj[i].onmouseout?=?function()?{? ??
  10. this.style.backgroundColor?=?“#FFFFFF”;? ??
  11. }? ??
  12. list_obj[i].onclick?=?function()?{? ??
  13. alert(“这是第”?+?p?+?“记录”);? ??
  14. }? ??
  15. })()? ??
  16. }? ??
  17. </script>??

至于这里原理和语法我将近期整理,并更新

赞(0) 打赏
未经允许不得转载:WEB前端开发 » Javascript循环绑定事件(续)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏