JavaScript中addEventListener绑定函数时传递参数的问题求助

你这段代码的问题有两个：一是直接调用addNumber(numberButton[i].innerText)会让函数立刻执行，而不是点击时触发；二是用var声明的i是函数级作用域，循环结束后所有按钮都会拿到最后一个i对应的内容。下面给你几个实用的解决办法：

方法1：用立即执行函数创建闭包 #

把当前按钮的文本值封装到闭包里，确保每个按钮绑定的函数能拿到自己对应的数值：

for (var i = 0; i < 11; i++) {
    // 立即执行函数保存当前的文本值
    (function(currentNum) {
        numberButton[i].addEventListener('click', function() {
            addNumber(currentNum);
        });
    })(numberButton[i].innerText);
}

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

let是块级作用域，循环里每个迭代的i都是独立的，不会出现共用变量的问题，代码也更简洁：

for (let i = 0; i < 11; i++) {
    // 点击时再调用addNumber并传参
    numberButton[i].addEventListener('click', function() {
        addNumber(numberButton[i].innerText);
    });
}

或者用箭头函数简化写法：

for (let i = 0; i < 11; i++) {
    numberButton[i].addEventListener('click', () => addNumber(numberButton[i].innerText));
}

方法3：用bind绑定参数 #

bind会返回一个新函数，不会立即执行，同时把指定参数提前绑定好：

for (var i = 0; i < 11; i++) {
    numberButton[i].addEventListener('click', addNumber.bind(null, numberButton[i].innerText));
}

这里null是绑定this的值，如果你不需要修改addNumber里的this指向，传null即可。

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