JavaScript经典的问题之--循环绑定事件

我们在前端开发时，经常会遇到这样一种场景，在以ul li 构建的菜单中，要对每个li菜单进行事件的绑定，需要传入一个id参数，事件处理函数根据id进行相应的处理。见下列代码。

<!--示例代码一 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" >   
<head>   
    <title>Untitled Page</title>   
</head>   
<body>   
<ul id="list">   
<li id="menuItem1">菜单1</li>   
<li id="menuItem2">菜单2</li>   
<li id="menuItem3">菜单3</li>      
</ul> 
<script type="text/javascript">
   1:   
   2:     function say(i)  {
   3:         alert(i);
   4:     }
   5:     var all_li = document.getElementById("list").getElementsByTagName("li");
   6:     for (var i = 0; i < all_li.length; i++) {     
   7:         all_li[i].onclick = function() {
   8:             alert(i);
   9:         }
  10:     }    
</script>   

</body>   
</html>

打开浏览器，测试发现，无论点击哪个菜单，弹出的提示窗口都显示“3”。纠其原因发现在元素事件绑定的时候，实际只是把函数的引用赋值给点击事件的相应函数，但是由于js的闭包特性，在循环结束后，i的值

posted on 2012-03-12 15:17  阿明007  阅读(239)  评论(0)  编辑  收藏  举报

导航