不运行函数的 RemoveEventListener

Question

所以我尝试使用 removeEventListener 函数删除我的 addEventListener 函数。我已经阅读了很多关于它需要包含一个处理函数的信息，我已经完成了。

我遇到的一个问题是，当我使用谷歌的搜索框更改输入时，我想删除事件监听器。不要介意谷歌，但实际上所有正在发生的事情是它正在识别输入值何时发生变化并提供新结果。所以有点代码

var input = document.getElementById('search-input');
var searchBox = new google.maps.places.SearchBox(input);
google.maps.event.addListener(searchBox, 'places_changed', locationChange);

function previousButtonFunction(){
    //Does something here and does not return anything. Lets just say it places markers all over the map
}

function locationChange() {
    var previousButton = document.getElementById('previous');
    previousButton.removeEventListener('click', previousButtonFunction());
    previousButton.addEventListener('click', function () { previousButtonFunction()})
};

所以这段代码看起来对你来说可能没有任何意义，但我想要得到的是，在第一个输入上它会运行添加事件侦听器，而不是运行 removeEventListener 函数。一旦输入的值发生了变化，我想删除当前的监听器并用一个新的 addeventlistener 重新识别 previousButton。

一开始，我意识到previousButtonFunction()的函数是运行的，我认为它只有在有一个识别的监听器的情况下才会运行。所以第一个问题是如果没有添加事件监听器，removeEventListener 函数应该运行吗？其次，如何在不运行该函数的情况下删除 addEventListener？我是否需要传入一个跟踪标识符，例如 true => run it/false => don't run？

非常感谢任何帮助

Answer 1

不要在函数名之后使用()。您只想传递对该函数的引用。在名称后加上() 调用函数并传递返回值。这是一个很常见的错误。

改变这个：

previousButton.removeEventListener('click', previousButtonFunction());

到这里：

previousButton.removeEventListener('click', previousButtonFunction);

.addEventListener() 也是如此。不要在函数名后面加上()，除非函数返回另一个你想成为监听器的函数。

---

仅供参考，有点不清楚您为什么要尝试删除然后重新添加完全相同的侦听器函数。除非该对象上有多个侦听器并且您尝试更改侦听器的顺序，否则这本质上是一个 noop。