如何在JavaScript中为onclick监听器传递常量参数？

你遇到的核心问题是：用var声明的变量属于函数作用域，所有点击事件的回调函数共享同一个i变量，等循环结束后i的值已经变成data.length，所以点击按钮时都会传入这个最终值。下面是几种实用的解决办法：

方法1：用立即执行函数（IIFE）创建独立作用域 #

通过立即执行函数把当前循环的i值作为参数传入，形成独立作用域，让每个回调函数绑定当前的i值：

for (var i = 0; i < data.length; i++) {
    button = document.createElement('button');
    button.onclick = (function(currentI) {
        return function() {
            myScript(currentI);
        };
    })(i);
}

方法2：用let替代var（ES6+推荐方案） #

let声明的变量拥有块级作用域，每次循环都会生成一个新的i变量，回调函数会绑定当前循环的那个i值，写法最简洁：

for (let i = 0; i < data.length; i++) {
    button = document.createElement('button');
    button.onclick = function () {
        myScript(i);
    };
}

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

利用bind方法提前把当前的i值绑定到回调函数的参数上，生成一个新的函数：

for (var i = 0; i < data.length; i++) {
    button = document.createElement('button');
    button.onclick = myScript.bind(null, i);
}

这里bind的第一个参数是this指向（不需要的话可以传null），后面的参数就是要提前传入myScript的常量值。

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