动态添加和删除事件侦听器

Question

我使用

为自定义元素中的div添加了一个tap侦听器

var nicediv = document.getElementById('nicediv');
nicediv.addEventListener('tap',this.listenerfunc.bind(this),false);

这是成功的但我无法删除事件监听器。这没用。

nicediv.removeEventListener('tap',this.listenerfunc);

有什么想法吗？

Answer 1

问题是监听功能与您尝试删除的功能不同。通过添加.bind(this)，您已更改了该功能。换句话说，this.listenerfunc！== this.listenerfunc.bind(this)。

此问题是addEventListener的MDN页面上的地址。请参阅“处理程序中的此值”。

解决问题的一种快速方法是：

var handler = this.listenerfunc.bind(this);
nicediv.addEventListener('tap', handler, false);
...
nicediv.removeEventListener('tap', handler);

但是，如果要删除另一个范围内的侦听器，则需要保留对handler的引用。

我修复它的方法是转到this.listenerfunc的定义并将.bind(this)放在定义上！