如何在for循环绑定的click事件监听器中保留循环变量值？

你遇到的问题核心是：用var声明的ind属于全局/函数级作用域，所有点击事件的回调函数共享同一个ind变量。当循环结束后，ind已经变成了循环的最终值，所以无论点击哪个元素，都会输出这个最终值。

下面是几种可行的解决方案：

方案1：用let替代var声明索引 #

let是块级作用域，每次循环都会创建一个独立的ind变量，每个回调函数绑定的都是当前循环的索引值：

for (let ind = 0; ind < JSON.parse(localStorage.getItem('data')).length; ind++) {
    var sc = document.createElement('div');
    sc.addEventListener('click', function () {
        console.log(ind);
    })
}

方案2：用立即执行函数（IIFE）创建闭包 #

通过立即执行函数把当前循环的索引值封装到独立作用域中，让回调函数绑定该作用域内的索引：

for (var ind = 0; ind < JSON.parse(localStorage.getItem('data')).length; ind++) {
    var sc = document.createElement('div');
    (function(currentInd) {
        sc.addEventListener('click', function () {
            console.log(currentInd);
        })
    })(ind);
}

方案3：将索引存储在元素自定义属性中 #

把索引值绑定到元素的data-*属性上，点击时从当前元素获取对应值：

for (var ind = 0; ind < JSON.parse(localStorage.getItem('data')).length; ind++) {
    var sc = document.createElement('div');
    sc.dataset.index = ind;
    sc.addEventListener('click', function () {
        console.log(this.dataset.index);
    })
}

补充说明：你之前尝试给事件监听器加参数得到PointerEvent，是因为事件回调的第一个参数默认就是事件对象，直接加参数会覆盖你想传入的索引，所以需要通过上述方式保留当前循环的索引值。

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