JavaScript循环中绑定addEventListener到链接时函数传参异常

问题原因 #

你遇到的是JavaScript闭包与var作用域导致的经典问题：

• 循环中用var声明的item是函数级作用域变量，整个循环过程中共用同一个item引用
• 点击事件是异步触发的，当事件执行时循环已经结束，item指向数组最后一个元素，因此所有链接调用LoadQuestion时都会传入最后一项的OptionId

解决方案 #

方案1：使用let声明变量（ES6+推荐） #

把循环里的var item改成let item，利用let的块级作用域特性，每次循环都会创建独立的item变量，绑定当前循环的元素：

function generateList(jsonArray) {
    var ul = document.createElement('ul');

    for (var i = 0; i < jsonArray.length; i++) {
        let item = jsonArray[i]; // 替换var为let
        var li = document.createElement('li');
        if (item.OptionType == 'Link') {
            var link = document.createElement('a');

            link.addEventListener("click", function () {
                LoadQuestion(item.OptionId);
            });
            link.setAttribute('href', '#');
            link.innerText = item.OptionText;
            li.appendChild(link);
            ul.appendChild(li);
        }
        // ... 其他类型处理逻辑
    }
    return ul;
}

方案2：使用立即执行函数（IIFE）保存当前值 #

通过立即执行函数创建独立作用域，把当前item作为参数传入，保存每次循环的独立值：

function generateList(jsonArray) {
    var ul = document.createElement('ul');

    for (var i = 0; i < jsonArray.length; i++) {
        var item = jsonArray[i];
        var li = document.createElement('li');
        if (item.OptionType == 'Link') {
            var link = document.createElement('a');

            // 用IIFE包裹回调，传入当前循环的item
            (function(currentItem) {
                link.addEventListener("click", function () {
                    LoadQuestion(currentItem.OptionId);
                });
            })(item);
            
            link.setAttribute('href', '#');
            link.innerText = item.OptionText;
            li.appendChild(link);
            ul.appendChild(li);
        }
        // ... 其他类型处理逻辑
    }
    return ul;
}

方案3：使用bind绑定参数 #

通过Function.prototype.bind直接把OptionId绑定到LoadQuestion函数上：

function generateList(jsonArray) {
    var ul = document.createElement('ul');

    for (var i = 0; i < jsonArray.length; i++) {
        var item = jsonArray[i];
        var li = document.createElement('li');
        if (item.OptionType == 'Link') {
            var link = document.createElement('a');

            // bind绑定参数，第一个参数为this（此处用null即可）
            link.addEventListener("click", LoadQuestion.bind(null, item.OptionId));
            
            link.setAttribute('href', '#');
            link.innerText = item.OptionText;
            li.appendChild(link);
            ul.appendChild(li);
        }
        // ... 其他类型处理逻辑
    }
    return ul;
}

关于硬编码click事件报错的修正 #

之前用link.click='LoadQuestion('+item.OptionId+')'报错，是因为：

1. 应该设置onclick属性而非click
2. 字符串拼接需注意语法规范

修正后的写法：

// 方法1：模板字符串（推荐）
link.setAttribute('onclick', `LoadQuestion(${item.OptionId})`);

// 方法2：字符串拼接
link.setAttribute('onclick', 'LoadQuestion(' + item.OptionId + ')');

内容的提问来源于stack exchange，提问作者TechTurtle