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

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 页面上得到解决。参见 "The value of this within the handler"。

解决此问题的快速方法是：

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

但是，如果要从添加监听器的位置移除另一个范围内的监听器，则需要保留对 handler 的引用。

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

Dynamically adding and removing Event listeners