本文介绍如何在JavaScript中遍历ul下的li元素并绑定点击事件以获取正确的索引。针对for循环直接绑定事件导致的索引错误问题，利用立即执行函数（IIFE）创建闭包，将当前索引i作为参数传入并保存至局部变量Index，确保每次点击时能访问到对应的独立作用域索引值。
HTML结构构建
首先构建所需的HTML结构。
<div >
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>事件绑定问题与解决方案
接下来遍历ul下的所有li元素并为其添加点击事件。通常做法是在for循环中直接绑定事件，但这样往往无法得到预期的结果，原因何在？
查看具体的JavaScript代码实现。
var li = document.getElementsByTagName('li');
for(var i = 0;i<li.length;i++){
(function(Index){
li[i].addEventListener('click',function(e){
alert('I am link #'+ Index );
},false);
})(i)
}通过上述方法成功实现了功能。
这种方式能够确保点击对应的li时，返回正确的索引值。
闭包原理详解
简要说明实现原理。
(function () { /* code */ } ()); // 推荐使用这个
(function () { /* code */ })(); // 但是这个也是可以用的这里使用了立即执行函数或自执行函数的写法。
本质上是利用闭包原理来获取索引。通过立即执行函数传入参数Index（即循环变量i），在函数内部形成闭包。
Index变量会一直保留在闭包的作用域块内。当点击事件触发时，调用作用域内保存的索引值，从而实现预期功能。
相关示例参考
参考几个简单的示例代码。
function num(){
var i = 0;
return function(){
console.log(i++);
}
}
var counter = num();
console.log(counter()); // 0 console.log(counter()); // ？？
var counter1 = (function(){
var i = 0;
return {
get:function(){
return i;
},
set:function(val){
i = val;
},
increment:function(){
return ++i;
}
}
}());
console.log(counter1);
console.log(counter1.get()); // ？
console.log(counter1.set(3)); // ？
console.log(counter1.increment()); // ？
console.log(counter1.increment()); // ？
console.log(counter1);
console.log(counter1.get()); // 0
console.log(counter1.set(3)); // 3
console.log(counter1.increment()); // 4
console.log(counter1.increment()); // 5以上介绍了JS遍历ul下li点击弹出索引的方法，希望对大家有所帮助。如有疑问请留言，小编会及时回复。感谢支持。