removeEventListener 似乎获得了不同版本的处理程序？

Question

我有一个 Calendar class，实例化了一次，然后 EventHandler class 在 Calendar 的构造函数中实例化了一次。我通过绑定 this（Calendar 对象）来添加事件监听器，这样我就可以访问其中的 Calendar 对象。这一切都很好。

也就是说，直到我尝试在事件处理程序中添加事件侦听器并将仍然是 Calendar 对象的 this 绑定到它们。添加有效，但事件侦听器的删除无效。似乎删除得到了我添加时传递的函数的不同副本。这是在 Calendar:

中添加事件侦听器

this.containerDiv.addEventListener("mousedown", this.eventHandler.calMousedown.bind(this));

然后在 calMousedown 在 EventHandler 中，我这样做：

this.containerDiv.addEventListener("mousemove", this.eventHandler.calMousemove.bind(this));

但随后在另一个处理程序中，我像这样删除了该侦听器：

this.containerDiv.removeEventListener("mousemove", this.eventHandler.calMousemove.bind(this));

但它不会删除它。 this 应该是整个地方的单个 Calendar 对象，但好像 remove 具有该函数的不同副本。我已经验证 this 是所有处理程序中的 Calendar 对象。我还尝试删除删除上的 .bind(this)，但也没有用。这怎么不删除？

Answer 1

bind 创建一个新函数，但您可以缓存它：

var handler = this.eventHandler.calMousedown.bind(this);

this.containerDiv.addEventListener("mousedown", handler);
...
this.containerDiv.removeEventListener("mousedown", handler);

removeEventListener 似乎获得了不同版本的处理程序？

removeEventListener seems to be getting a different version of the handler?

javascript

events

event-handling

mouseevent

dom-events