Javascript 中何时使用 addEventListener 累积？答案

【问题标题】：When does using addEventListener accumulate in Javascript?Javascript 中何时使用 addEventListener 累积？
【发布时间】：2022-01-14 03:40:32
【问题描述】：

我已经在 SO 上看到了这个问题：JavaScript: remove event listener

我明白它的作用。但我不知道为什么 addEventListener 有时会累积超时而其他时候不会。

我从玩弄我的代码的理解是，只有当 addEventListeners 嵌套在另一个 addEventListener 中时才会发生累积？有人可以解释为什么会这样吗？

http://jsfiddle.net/dTx72/1/

在我上面的演示中，我只有一个带有按钮的 div。我已将 addEventListener 添加到 div 和按钮。单击按钮时，会弹出警报。

<div id='clickBox'>
  <button id='button'>Click Me</button>
</div>

Javascript

 document.getElementById('clickBox').addEventListener('click', function () {
    alert('hello');
    document.getElementById('button').addEventListener('click', function () {
      alert('accumulates per click');
    });
 });

结果是

第一次点击：alert('hello')，alert('accumulates per click')，
第二次点击：alert('hello'), alert('累计每 click'),alert('每次点击累积')

等等。奇怪的是 alert('hello') 也不会累积。

【问题讨论】：

你能解释一下-1吗？如果您无缘无故地投反对票，这将无济于事
如果没有代码需要审查，您的问题很难回答。所以，我们不知道我们看不到的事情是如何发生的。
哦，好吧，我很抱歉。我认为这是一个常见的问题，背后有一个解释。希望当我发布一个 JSfiddle 时，它不会只是我犯的一个愚蠢的错误。
因为您在每次点击点击框时都绑定了另一个事件处理程序，并且还执行了之前绑定的侦听器函数。
啊，好的，我明白了。我在另一个侦听器上添加了一个侦听器，因此它会累积超时，所以这就是我将使用 removeEventListener 的地方。谢谢

标签： javascript events

【解决方案1】：

addEventListener 总是累积的。顾名思义，它添加了一个事件侦听器，但不会删除以前的事件侦听器。

但是，如果您为同一阶段的同一事件添加相同的函数作为事件侦听器，则该函数将只运行一次。

例子：

el1.addEventListener('click', f);
el1.addEventListener('click', g);
el1.click(); // f and g run once

el2.addEventListener('click', f);
el2.addEventListener('click', f);
el2.click(); // f runs once

el3.addEventListener('click', f, true);
el3.addEventListener('click', f, false);
el3.click(); // f runs twice (one during capture and one during bubbling)

el4.addEventListener('click', function(){ alert('a'); }, true);
el4.addEventListener('click', function(){ alert('a'); }, false);
el4.click(); // The function will run twice, because even if they do the same,
             // they are different functions

【讨论】：

【解决方案2】：

当您使用addEventListener 时，您基本上是在说“当事件 X 发生时，除了您应该做的任何其他事情之外，还要执行 Y。所以您的程序的运行是： p>

当他们点击时，执行以下操作：

TASK A:
say "hello"
add a new event listener to say "accumulates" every time they click.

所以他们点击了，现在他们的任务列表是

TASK A:
say "hello"
add a new event listener to say "accumulates" every time they click.
TASK B:
say "accumulates"

所以他们点击，他们的新任务列表是

TASK A:
say "hello"
add a new event listener to say "accumulates" every time they click.
TASK B:
say "accumulates"
TASK C:
say "accumulates"

每次他们点击时，您都在添加一个新任务。因此，无论您在点击时添加什么任务，都会自然而然地累积起来，因为您在“待办事项”列表中一遍又一遍地添加相同的项目。

【讨论】：

谢谢，通俗易懂