var a = function() vs function a() 用于事件侦听器？

Question

我试图了解向事件侦听器添加函数时的区别以及它的含义。

var buttons = document.getElementsByTagName('button');
for (i = 0, len = 3; i < len; i++) {
    var log = function(e) {
        console.log(i);
    }
    buttons[0].addEventListener("click", log);
}

for (i = 0, len = 3; i < len; i++) {
    function log(e) {
        console.log(i);
    }
    buttons[1].addEventListener("click", log);
}

http://jsfiddle.net/paptd/

第一个按钮触发console.log 3 次，而第二个按钮只触发一次。

在正常情况下向事件侦听器添加函数时为什么以及应该使用什么？

Answer 1

嗯，有几点注意事项：

• 第一个在每次迭代中创建一个新的log 函数，因此每次添加另一个事件侦听器时都会添加一个新函数。
• 第二个创建一个全局（阅读关于提升）log 函数，如果在同一个 EventTarget 上使用相同的参数注册了多个相同的 EventListener，则丢弃重复的实例。它们不会导致 EventListener 被调用两次。

规格：

调用 addEventListener（或 removeEventListener）在同一个 EventTarget 上使用相同的参数 type、listener 和 useCapture 的值重复调用无效。 这样做不会导致事件监听器注册更多不止一次，并且不会导致触发顺序发生变化。

source 感谢 Rob W.

所以第二次和第三次迭代什么都不做。

• 你还有一个闭包问题，最后一次迭代将i 设置为3，这就是控制台中显示的内容。

带闭包的固定版本：

var buttons = document.getElementsByTagName('button');
for (i = 0, len = 3; i < len; i++) {
    var log = (function closure(number) {
        return function () {
            console.log(number);
        }
    })(i);

    buttons[0].addEventListener("click", log);
}

DEMO