javascript遍历对象添加事件
1、 现在有一下一个列表，我想给每个<a>标签添加一个onclick事件。
<ul id="menu">
<li><a href="javascript:void(0);">个人信息</a></li>
<li><a href="javascript:void(0);">成绩查询</a></li>
<li><a href="javascript:void(0);">课表查询</a></li>
<li><a href="javascript:void(0);">选课</a></li>
<li><a href="javascript:void(0);">评价课程</a></li>
</ul>
2、以下是js代码
window.onload = function(){
var omenu = document.getElementById('menu');
for (var i = 1 ; i<10; i+=2) {
(function(i){omenu.childNodes[i].childNodes[0].onclick = function() {
alert(i);
}})(i);
}
}
点击后会弹出相应的i值
例如点击第二个<a>的文字会弹出3来
3、上面的代码我们来分析一下，
window.onload = function(){
var omenu = document.getElementById('menu');
//先是获取了<ul id="menu">这个元素
for (var i = 1 ; i<10; i+=2) {
//为什么i是从1开始而不是从0开始呢，因为文本也算是一个节点，
//从html的代码我们可以看到<ul>与<li>之间是有几个空格的，
//这些空格被算做文本元素，omenu.childNodes[0]是获取的不是<li>而是文本
//同理，<li>与<li>之间也是有几个空格的，所以用i+=2，递增2而不是递增1
//但是<li>与<a>之间没有空格隔开，所以用childNodes[0]就可以
(function(i){omenu.childNodes[i].childNodes[0].onclick = function() {
//childNodes[i]是omenu的某个子元素节点，<li>是omenu的子元素，
//<a>是<li>的子元素，所以用omenu.childNodes[i].childNodes[0]就
//可以获取到<a>
// (function(i){})(i)；是一个函数立即执行的结构
alert(i);
}})(i);
}
}
4、为什么要用一个函数立即执行的结构呢？不用行不行？
不行。
如果我们把代码改为下面这样，
window.onload = function(){
var omenu = document.getElementById('menu');
for (var i = 1 ; i<10; i+=2) {
omenu.childNodes[i].childNodes[0].onclick = function() {
alert(i);
}
}
}
你会发现无论点击哪个都只会弹出11，因为alert(i)；这里面的i是全局变量，
所有你定义的onclick事件中，调用的是同一个i，既然是同一个i，那当然弹出的值当然是相同的。
你可能会疑惑childNodes[i]中的i,也是同一个i，为什么它就能找到每个元素呢。
因为onclick事件是发生在页面加载后，由人来触发的，即所有事件绑定完成之后发生的。遍历过程中，i的值是变化的，所以能找到所有需要元素。遍历结束后，i的值就定格在11。这个时候再弹出i的值，就都是11了。
问题就是这不是我们需要的效果，我们需要每个元素弹出相应的不同的值
所以我们要弹出的i应该是局部变量，而不是全局变量， (function(i){})(i)的作用就在于此，这个结构事实上是把全局变量i作为实参传进，这时 alert(i);这里i，其实不是全局变量的i了，而是作为function(i)这个匿名函数的局部变量，
既然是局部变量，那各个onclick事件的i都是不相关，这样值当然不一样了，而且保留传进来时的值。
5、最后放上完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload = function(){
var omenu = document.getElementById('menu');
for (var i = 1 ; i<10; i+=2) {
(function(i){omenu.childNodes[i].childNodes[0].onclick = function() {
alert(i);
}})(i);
}
}
</script>
</head>
<body>
<ul id="menu">
<li><a href="javascript:void(0);">个人信息</a></li>
<li><a href="javascript:void(0);">成绩查询</a></li>
<li><a href="javascript:void(0);">课表查询</a></li>
<li><a href="javascript:void(0);">选课</a></li>
<li><a href="javascript:void(0);">评价课程</a></li>
</ul>
</body>
</html>