Javascript循环绑定事件（续）

时间：2009年03月26日作者：愚人码头查看次数:14,985 views评论次数：0

前几天发表了《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>  

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

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《Javascript循环绑定事件（续）》

如果你读了我的文章，觉得有帮助： 说明
分类：JS

您可能感兴趣的文章

0条评论

暂时没有评论！

发表评论

*

*