Javascript 为什么eventlistener click需要返回函数才能工作

//这很有效

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
    btn.addEventListener('click', (function(i) {
        return function() {console.log(i)};
    })(i));
  document.body.appendChild(btn);
}

for（变量i=0；i<5；i++）{
var btn=document.createElement（'button'）；
btn.appendChild（document.createTextNode（'Button'+i））；
btn.addEventListener（'click'，（函数（i））{
返回函数（）{console.log（i）}；
})（i） ）；
文件.正文.附件（btn）；
}

//这不管用

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
    btn.addEventListener('click', (function(i) {
        return console.log(i);
    })(i));
  document.body.appendChild(btn);
}

for（变量i=0；i<5；i++）{
var btn=document.createElement（'button'）；
btn.appendChild（document.createTextNode（'Button'+i））；
btn.addEventListener（'click'，（函数（i））{
返回控制台日志（i）；
})（i） ）；
文件.正文.附件（btn）；
}

---

有人能告诉我为什么第二个例子不起作用吗？为什么需要返回函数？

因为第一个示例并不是真正返回函数。函数无处可返回任何内容，因此is无法返回任何内容。在第一个示例中，它返回一个函数，但该函数实际上只是调用

console.log（i）。如果您说
console.log（i），那么您的第二个示例将起作用与返回控制台.log（i）相反
因此，本质上，您是在订阅将来某个地方将要发生的事件（单击按钮后）

在第一个（工作）示例中，当您创建一个IIFE并且IIFE的结果是一个函数时，当事件发生时，会调用一个回调（返回函数），以生成所需的结果

在第二个（非工作）示例中，您正在创建一个立即执行的IIFE，这样您可以得到如下结果：

btn.addEventListener('click', undefined);

因为第二个参数不是函数（根据需要），所以一旦按下按钮并触发回调，就没有什么可执行的。
因为您使用的是IIFE，我们可以用它的返回值替换它。因此，第一个示例与

btn.addEventListener('click', function() {console.log(i)});

 btn.addEventListener('click', console.log(i));

第二个例子类似于

btn.addEventListener('click', function() {console.log(i)});

 btn.addEventListener('click', console.log(i));

（
i
的实际值与当前问题无关）

addEventListener
希望函数作为第二个参数传递，但第二个示例没有传递。它传递
console.log
的返回值，该值为
未定义
。因此，单击时无需执行任何操作

为什么eventlistener click需要返回函数才能工作

请注意，事件侦听器不返回函数。在第一个示例中，
function（）{console.log（i）}
是事件处理程序。外部函数
（函数（i）{…}（i））
只是一个生成事件处理程序的函数。
第二个示例无法删除返回。我想仍然不清楚为什么要返回一个函数。必须返回一个函数，因为这是方法所要求的：。在web inspector控制台中运行此命令，并查看您得到的结果：
typeof console.log（'hello world'）
（将返回'undefined'）。然后尝试
typeof function（）{console.log（'hello world'）；}
（将返回'function'）。您会说“第一个示例并不是真正返回函数”和“在第一个示例中，它是返回函数”。你不是自相矛盾吗？为什么你要传递一个立即执行的函数，它返回另一个函数作为第二个参数？为什么不直接编写
btn.addEventListener（'click'，函数（i）{console.log（i）}）？这是一个面试问题，我只是想了解一下。此外，仅添加console.log不会返回索引。在JSFIDLE中尝试一下。谢谢，我的目标是理解这个示例以及您将在这个站点上找到的解决方案。我还注意到，如果将console传递给addEventListener，则click事件似乎不会向控制台输出任何内容。
console
不是一个函数
addEventListener
需要一个函数。很抱歉，我错过了您的示例。非常感谢。