动态添加和移除事件监听器

Question

我在自定义元素中的一个div上添加了一个tap监听器，使用代码如下：

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

这个操作是成功的，但我无法移除事件监听器。这种方法不起作用。

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

你有什么想法吗？

- Aravind

---

尝试这个。函数removeEventHandler(elem, eventType, handler){ 如果(elem.removeEventListener) elem.removeEventListener(eventType, handler, false); 如果(elem.detachEvent) elem.detachEvent('on' + eventType, handler); } - Sushil

我只是登录控制台查看了一下目前的情况。elem.removeEventListener 是有效的，并产生了function removeEventListener() { [native code] }。但是detachEvent未定义。所以我使用的方法是正确的。在最新版本的Chrome中，removeEventListener中useCapture的false值应该是默认为false的。但无论如何，我也尝试过了。不起作用。这一定与Polymer相关。 - Aravind

是的，这应该可以工作，但也许 Polymer 在这里做了些什么。detachEvent 是针对旧浏览器的。 - Sushil

Answer 1

问题在于监听函数不是您尝试删除的相同函数。通过添加.bind(this)，您已经改变了函数。换句话说，this.listenerfunc !== this.listenerfunc.bind(this)。

这个问题在MDN页面上的addEventListener中得到了解决。请参见“处理程序内的this值”。

一个快速解决方法是：

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

但是如果你要在添加侦听器的作用域之外的另一个作用域中删除侦听器，你需要保留对handler的引用。

我会将.bind(this)直接放在this.listenerfunc的定义上来修复它！

- Cymen

---

很好，那很有道理。 - Aravind