RemoveEventListener没有运行功能
问题描述:
所以我想使用removeEventListener函数删除我的addEventListener函数。我已经阅读了很多关于它需要包含一个处理函数,我已经完成了。RemoveEventListener没有运行功能
其中一个问题是,我碰到的是,当我使用google的搜索框更改输入时,我想删除eventlistener。不介意谷歌,但真正发生的一切是确定输入值何时发生变化并提供新的结果。因此,一些代码
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函数应该在没有添加eventlistener的情况下运行?第二我如何删除addEventListener而不运行该功能?我是否需要传入跟踪标识符,例如true =>运行它/ false =>不运行?
感谢任何帮助是极大的赞赏
答
函数名后不要使用()
。您只想传递该函数的引用。在名称调用函数后传入()
并传递返回值。这是一个非常常见的错误。
更改此:
previousButton.removeEventListener('click', previousButtonFunction());
这样:
previousButton.removeEventListener('click', previousButtonFunction);
这同样适用于.addEventListener()
。不要把()
放在函数名后面,除非函数返回你想成为侦听器的另一个函数。
仅供参考,它有点不清楚为什么你试图删除,然后加回相同的完全相同的侦听器功能。除非该对象上有多个侦听器,并且您试图更改侦听器的顺序,否则这实际上是一个noop。
因此,对于addEventListener,我可以使用.addEventListener('click',previousButtonFunction)? –
@JuliusDoan - 是的,这将工作得很好。仅使用函数名称就会传递对'.addEventListener()'和'.removeEventListener()'所期望的函数的引用。 – jfriend00
哦哇,刚刚删除()的第一部分完全适用于removeEventListener。关于addEventListener(),它并没有太多的工作。我保持它作为一个函数(){previousButtonFunction(参数)},它的工作。 –