var a = function()vs function a()for event listener？

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.log3次,而第二个按钮仅触发一次.

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

Answer 1

好吧，有几点注意事项：

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

眼镜：

使用相同的参数 type、listener 和 useCapture 值对同一 EventTarget 重复调用 addEventListener（或removeEventListener）不会产生任何效果。这样做不会导致事件侦听器被注册多次，也不会导致触发顺序发生变化。

来源感谢 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);
}

演示版