Question

elemen.addEventListener('click',func,false);
elemen.addEventListener('click',func,false);

点击func是否会elemen被调用两次？

如果是的话......是否有一个解决方案来检查elemen上是否存在相同的事件监听器？

Answer 1

func 不会在点击时被调用两次，不会;但请继续阅读细节和“陷阱”。

来自规范中的addEventListener：

如果在具有相同参数的同一EventListeners上注册了多个相同的EventTarget，则会丢弃重复的实例。他们不导致EventListener被调用两次，因为它们被丢弃，所以不需要使用removeEventListener方法删除它们。

（我的重点）

以下是一个例子：

var target = document.getElementById("target");

target.addEventListener("click", foo, false);
target.addEventListener("click", foo, false);

function foo() {
  var p = document.createElement("p");
  p.innerHTML = "This only appears once per click, but we registered the handler twice.";
  document.body.appendChild(p);
}

<input type="button" id="target" value="Click Me">

重要的是要注意，它必须是相同的功能，而不仅仅是执行相同功能的功能。例如，在这里我将四个独立的函数连接到元素，所有这些函数都将被调用：

var target = document.getElementById("target");

var count;
for (count = 0; count < 4; ++count) {
  target.addEventListener("click", function() {
    var p = document.createElement("p");
    p.innerHTML = "This gets repeated.";
    document.body.appendChild(p);
  }, false);
}

<input type="button" id="target" value="Click Me">

这是因为在每次循环迭代时，都会创建一个不同的函数（即使代码是相同的）。

Answer 2

我想补充一下@ T.J。提供的出色答案。拥挤的人。

我有一个特定的任务，要求我为同一事件向HTML元素添加两次相同的回调。的确，第二个放弃了第一个，但是：

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

但是请注意，当使用匿名函数作为处理程序时，这样的监听器将是不一样的，因为匿名函数是即使使用SAME不变源代码定义也不相同只是反复调用，即使在循环中也是如此。

来源：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Multiple_identical_event_listeners（截至2020年2月5日。）

因此，如果第二个EventListener将其处理程序作为匿名函数，则不会丢弃第一个。因此，它将被简单地调用两次。

循环解决方案的替代方案。

同一个addEventListener会工作吗？

2 个答案: