javascript - 动态添加和删除事件监听器

Question

我在自定义元素的 div 中添加了一个点击监听器

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 页面上得到解决。请参阅“处理程序中 this 的值”。

解决它的一种快速方法是：

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

handler但是，如果您要从添加它的另一个范围中删除侦听器，则需要保留对周围的引用。

我会解决它的方法是去定义this.listenerfunc并把.bind(this)正确的定义！