javascript 变量a =函数()与函数a()是否用于事件侦听器？

mutmk8jj 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(125)

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

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次，而第二个按钮仅击发一次。
在正常情况下，向事件侦听器添加函数时，为什么要使用函数以及应该使用什么？

JavaScript

来源：https://stackoverflow.com/questions/16853776/var-a-function-vs-function-a-for-event-listener

1条答案

按热度按时间

x8diyxa71#

好吧，几个注意事项：

第一个函数在每次迭代中创建一个新的log函数，因此每次添加另一个事件侦听器时，它都会添加一个新函数。
第二个创建一个global（读取提升）log函数，如果多个相同的EventListener使用相同的参数注册在同一个EventTarget上，则会丢弃重复的示例。它们不会导致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);
}

DEMO

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 变量a =函数()与函数a()是否用于事件侦听器？

1条答案

相关问题

热门标签

最新问答