RemoveEventListener没有运行函数

时间:2016-06-09 04:01:49

标签: javascript jquery event-handling listener addeventlistener

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

我遇到的一个问题是,当我使用google的搜索框更改输入时,我想删除eventlistener。不要介意google,但实际上所发生的一切都是确定输入值何时发生变化并提供新结果。所以有点代码

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()})
};

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

第一次,我意识到previousButtonFunction()的函数是运行的,我认为它只会在有一个已识别的监听器时运行。所以第一个问题是如果没有添加eventlistener,应该运行removeEventListener函数?第二,如何在不运行函数的情况下删除addEventListener?我是否需要传递跟踪标识符,例如true => run it / false =>不跑?

非常感谢任何帮助

1 个答案:

答案 0 :(得分:1)

请勿在函数名后使用()。您只想传递对该函数的引用。在名称后面加()会调用该函数并传递返回值。这是一个非常常见的错误。

改变这个:

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

到此:

previousButton.removeEventListener('click', previousButtonFunction);

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

仅供参考,您有点不清楚为什么要尝试删除然后添加相同的完全相同的侦听器功能。除非该对象上有多个侦听器,并且您正在尝试更改侦听器的顺序,否则这实际上是一个noop。