Question

我一直在打破以下问题。在MDN Documentation on EventTarget.addEventListener()中，陈述如下：

多个相同的事件监听器

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

这是一件好事。所以我不能在元素上添加重复的EventListener。但是如何确定在DOM中的某个地方是否已经有一个EventListener附加到另一个元素？

说，我有一个名为expandNavigationGroup的事件，只要单击我的导航面板打开导航组，就会触发该事件。我可以在我的DOM中的任何地方附加此事件的监听器。例如：

var el = document.getElementById("somediv");
el.addEventListener("expandNavigationGroup", doSomething, false);

doSomething方法可以执行相关操作，例如清理某些内容。打开导航组时，需要执行一次，但只需执行一次。但是如果我的代码执行以下操作：

var el = document.getElementById("someotherdiv");
el.addEventListener("expandNavigationGroup", doSomething, false);

EventListener被添加两次，我的清理代码被执行两次。

如何防止这种情况发生？

Answer 1

根据MDN文档如果在same EventTarget上使用相同参数注册了多个相同的EventListener，则会丢弃重复的实例。您正在不同目标somediv和someotherdiv上注册事件，因此清理代码将执行两次。

Answer 2

@Chris is right。你唯一能做的就是使用某种＆＃34; _。一次＆＃34;功能

这是一个实现：

var once = (function (func) {
  var wasExecuted = false
  return function onceExecuter () {
    if(wasExecuted) {
      wasExecuted = true
      return func.apply(null, arguments)
    }
  }
})()

现在你可以这样做：

var doSomethingOnce = once(doSomething)
doSomething()
doSomething()

doSomething执行一次

Answer 3

由于您没有在同一EventTarget上注册EventListeners，因此您必须手动删除EventListeners。

var el = document.getElementById("somediv");
el.addEventListener("expandNavigationGroup", doSomething, false);
el.removeEventListener('expandNavigationGroup', doSomething, false);

var el = document.getElementById("someotherdiv");
el.addEventListener("expandNavigationGroup", doSomething, false);
el.removeEventListener('expandNavigationGroup', doSomething, false);

普通的javascript阻止了eventListener被执行两次

3 个答案: