事件监听器中的 JavaScript 闭包

Question

<button>test</button>
<button>test</button>
<button>test</button>
<button>test</button>
<button>test</button>
<script>
var nodes = document.getElementsByTagName('button');
function clicked(i){
    console.log('pass');

    // Closure
    // return function(){
    //  console.log(i);
    // }

}
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', clicked(i));
}
</script>

我试图对js闭包有一个充分的理解，上面的函数甚至为按钮添加了监听器。它控制台记录“通过”5 次，然后单击按钮时不执行任何操作。但如果我取消注释掉关闭位(返回)，console.log 将回显 i，但不会记录“pass”。我确实找到了相关答案，但我不明白为什么关闭 onclick 在单击按钮时不会记录“pass”字符串，而是会注销 i。

How do JavaScript closures work?

Answer 1

您在这里所做的是直接调用函数clicked，而不是将其设置为事件处理程序。

i don't get why with closure onclick doesn't log the 'pass' string when button clicked instead does log out the i.

好吧，你的关闭是

return function(){
  console.log(i);
}

为什么会记录除 i 之外的任何内容？

创建此闭包的函数应在页面初始化期间记录“pass”五次(当您在循环中调用五次时，每次记录一行并返回闭包)。

您可以使用绑定(bind)。

nodes[i].addEventListener('click', clicked.bind(nodes[i], i));

这将为您提供 i 作为函数的参数，以便您可以执行以下操作

console.log("pass", i);