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) 放在定义上!