JavaScript动态绑定事件循环变量捕获问题解析

HTML结构示例

以下是页面的DOM结构示例。

 
<ul id="test">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

初始绑定代码及问题分析

对应的JavaScript逻辑代码如下：

 
// 根据ID获取DOM对象
function id(v) { return document.getElementById(v); }
// 根据标签名获取对象集合
function tag(element, t) { return element.getElementsByTagName(t); }
window.onload = function() {
// 获取test元素下的所有li节点
var li = tag(id("test"), "li");
// 遍历列表项并绑定鼠标点击事件
for(var i=0; i<li.length; i++) {
li[i].onclick = function() {
// 预期效果：依次弹出1, 2, 3, 4
// 实际现象：无论点击哪个，弹出的总是5
alert("你点击了第" + (i+1) + "项");
} 
} 
} 

修正方案：利用闭包捕获变量

出现上述现象的根本原因在于“for循环中的事件绑定并未立即执行，而是等到点击时才读取变量i的值，此时i已递增为5”。修正后的代码如下：

 
// 根据ID获取DOM对象
function id(v) { return document.getElementById(v); }
// 根据标签名获取对象集合
function tag(element, t) { return element.getElementsByTagName(t); }
window.onload = function() {
// 获取test元素下的所有li节点
var li = tag(id("test"), "li");
// 遍历列表项并绑定鼠标点击事件
for(var i=0; i<li.length; i++) {
(function() {
var t = i
li[i].onclick = function() {
alert("你点击了第" + t + "项");
} 
})(); 
} 
} 

经测试，代码运行正常，成功将循环变量i的值通过局部变量t传递至onclick事件处理函数中。