javascript - JS函数设置的addEventListeners过多

我有一个具有搜索功能的单页应用程序（SPA），我试图在其中跟踪用户如何与Adobe Analytics中的搜索栏进行交互。如果我导航到SPA的5个不同“页面”，则以下代码将触发该事件6次。似乎正在设置addEventListener，但是如果在“页面”上没有搜索，则不会清除。每次加载“页面”时，这些事件侦听器实际上都会排队，并且一旦输入搜索，它们都将同时触发，从而清除队列。

如果未执行搜索，并且仅通过按Enter执行搜索，则只有在触发该事件时才能清除eventListener吗？

假设我有以下代码：

clearInterval(interval);
var interval = setInterval(function(){
    if (document.querySelector("form div[data-autoid='search_bar'] input")) {
        inputField = document.querySelector("form div[data-autoid='search_bar'] input")
        inputField.addEventListener('keydown', searchEntered)
        clearInterval(interval);
    }
}, 500);

function searchEntered(e) {
    if (e.key == "Enter") {
      console.log("search entered");
      var event = new CustomEvent('searchEntered');
     dispatchEvent(event);
    }
}

最佳答案

如果要删除现有的事件侦听器，请使用EventTarget.removeEventListener()。

在MDN page状态下，您需要指定传递给type的相同listener和addEventListener()参数。如果还传递了选项，则还应该将相同的传递给removeEventListener()：


  给定一个先前通过调用addEventListener（）添加的事件侦听器，您最终可能会需要删除它。显然，您需要为removeEventListener（）指定相同的类型和侦听器参数，但是选项或useCapture参数呢？
  
  如果选项不同，则addEventListener（）使您可以为同一类型为同一类型多次添加相同的侦听器，而removeEventListener（）唯一检查的选项是capture / useCapture标志。它的值必须匹配，removeEventListener（）才能匹配，但其他值不匹配。


注意，不可能将多个相同的侦听器添加到同一元素。从MDN page：


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

关于javascript - JS函数设置的addEventListeners过多，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60856426/