我们在前端开发时，经常会遇到这样一种场景，在以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的值