Javascript 何时丢弃重复的事件侦听器，何时不丢弃？

我很难理解为什么在以下示例中创建的“重复”事件侦听器的行为如此不同。我已经阅读了一些关于这个主题的讨论，但是我刚刚开始学习JavaScript，我不太清楚在版本2中发生了什么，而在版本1中没有发生什么。有人愿意开导我吗

这是一个例子。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();
       }
     }

//版本1
var-clickEvents=0；
按钮。addEventListener（“单击”，按钮功能）；
函数按钮函数（）{
clickEvents++；
display.innerHTML=clickEvents；//该行为是由于作用域造成的。在版本1中，您正在添加全局作用域函数。当您再次尝试添加该函数时，它会自动失败，因为该函数已注册。来自MDN：

多个相同的事件侦听器

如果在同一EventTarget上注册了多个相同的EventListener
使用相同的参数，将丢弃重复的实例。它们不会
导致EventListener被调用两次，并且不需要删除它们
使用removeEventListener方法手动

在版本2中，由于在
main函数
中声明的
buttonFunction
是局部作用域，因此它与全局函数不同，并且每次调用它时都会得到不同的版本，因为作用域在变化。因为JS引擎在调用时认为函数不同de>addEventListener

每一个都是独立添加的。每次单击该按钮时，附加到该按钮的侦听器的数量就增加了一倍

该代码段演示了JS引擎认为对

bar（）

的每次调用都具有不同的本地

foo

函数foo（）{
控制台日志（“全局”）；
}
功能条（）{
函数foo（）{
控制台日志（“本地”）；
}
返回foo；
}
var oneG=foo；
var-twoG=foo；
var oneL=bar（）；
var twoL=bar（）；
log（`Global:${oneG===twoG}`）；
log（`Local:${oneL===twoL}`）；