现在有一下一个列表，我想给每个标签添加一个onclick事件。
以下是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值例如点击第二个的文字会弹出3来
上面的代码我们来分析一下，window.onload = function(){ var omenu = document.getElementById('menu'); //先是获取了
为什么要用一个函数立即执行的结构呢？不用行不行？不行。如果我们把代码改为下面这样， 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都是不相关，这样值当然不一样了，而且保留传进来时的值。
最后放上完整的代码