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被调用两次。

规格：

在具有相同参数类型，侦听器和useCapture值的相同EventTarget上重复调用addEventListener（或removeEventListener）无效。这样做不会导致事件侦听器更多地注册不止一次，也不会引起触发顺序的改变。

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

var a = function（）vs function a（）for event listener？

1 个答案: