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 = docu罪焐芡拂ment.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、最后放上完整的代码<!DOC哌囿亡噱TYPE 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>