Question

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

我明白它的作用。但我不知道为什么addEventListener有时会累积加班，而有时则不会。

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

在上面的演示中，我只有一个带有按钮的div。我已经为div和按钮添加了一个addEventListener。单击该按钮时，会弹出一个警告。

<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');
    });
 });

结果是

首先点击：提醒（＆＃39;你好＆＃39;），提醒（＆＃39;每次点击累积＆＃39;），
第二次点击：提醒（＆＃39;你好＆＃39;），提醒（＆＃39;累积每次点击＆＃39;），提醒（＆＃39;累计每次点击＆＃39;）

等等。对我来说很奇怪，警报（＆＃39;你好＆＃39;）也不会累积。

Answer 1

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

点击后，请执行以下操作：

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"

每次点击，您都会添加一项新任务。因此，无论您在点击时添加的任务是什么，都会自然累积，因为您在“待办事项”列表中反复添加相同的项目。

Answer 2

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

什么时候使用addEventListener在Javascript中累积？

2 个答案: