javascript - 重复的事件监听器何时被丢弃，何时不被丢弃？

Question

我无法理解为什么以下示例中创建的“重复”事件监听器的行为如此不同。我已经仔细阅读了有关该主题的一些讨论，但我才刚刚开始学习 JavaScript，我不太清楚版本 2 中发生的事情在版本 1 中没有发生。有人愿意启发我吗？

这是一个JSFiddle demo 。 JavaScript 看起来像这样:

// VERSION 1

   var clickEvents = 0;

   button.addEventListener('click', buttonFunction);

   function buttonFunction() {
     clickEvents++;
     display.innerHTML = clickEvents;  // <-- increases incrementally 
     button.addEventListener('click', buttonFunction);
     }

// VERSION 2

   var clickEvents = 0;

   mainFunction();

   function mainFunction() {

     button.addEventListener('click', buttonFunction);

     function buttonFunction() {
       clickEvents++;
       display.innerHTML = clickEvents;  // <-- increases exponentially
       mainFunction();
       }
     }

Answer 1

该行为是由于范围界定造成的。在版本 1 中，您添加了全局范围的 function 。当您尝试再次添加它时，它会默默失败，因为该函数已经注册。来自 MDN:

Multiple identical event listeners

If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and they do not need to be removed manually with the removeEventListener method.

在版本 2 中，由于 mainFunction 中声明的 buttonFunction 是本地作用域的，因此它与全局函数不同，并且每次调用它 mainFunction 你会得到一个不同的版本，因为范围正在改变。因为当你调用addEventListener时，JS引擎认为函数是不同的，所以每个函数都是独立添加的。每次单击该按钮时，附加到该按钮的监听器数量都会增加一倍。

该代码片段演示了 JS 引擎认为每次调用 bar() 都有一个不同的本地 foo

function foo() {
    console.log("global");
}

function bar() {
    function foo() {
	    console.log("local");
    }
    return foo;
}

var oneG = foo;
var twoG = foo;
var oneL = bar();
var twoL = bar();

console.log(`Global: ${oneG === twoG}`);
console.log(`Local: ${oneL === twoL}`);