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

Question

//这个有效

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 (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);
}

http://jsfiddle.net/sjzLhur0/

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

Answer 1

因为您使用的是 IIFE，我们可以用它的返回值替换它。所以第一个例子类似于

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

第二个例子类似

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

(i 的实际值与手头的问题无关)

addEventListener 期望一个函数作为第二个参数传递，但第二个示例没有传递一个。它传递 console.log 的返回值，即 undefined。所以点击时不会执行任何操作。

Why eventlistener click requires a return function to work

请注意事件监听器不返回函数。在您的第一个示例中， function() {console.log(i)} 是事件处理程序。外部函数 (function(i) { ... }(i)) 只是一个生成事件处理程序的函数。