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

Question

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

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

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

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

在我上面的演示中，我只有一个带有按钮的 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');
    });
 });

结果是

• 第一次点击:alert('hello'), alert('accumulates per click'),
• 第二次点击:alert('hello'), alert('accumulates per点击'),alert('每次点击累计')

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

Answer 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