将事件监听器作为 Class.prototype 函数移除答案

【问题标题】：Removing event listeners as Class.prototype functions将事件监听器作为 Class.prototype 函数移除
【发布时间】：2012-03-15 13:43:06
【问题描述】：

我试图在我的项目中创建一个基于 Class.prototype 的类，但我没有内联函数。考虑到这个例子，我不可能删除我课堂上的 myVideo 视频对象上的 eventListener。

这是一个理论示例，而不是我拥有的实际生产代码。

var myClass = function () {
    this.initialize();
}

MyClass.prototype.myVideo = null;

MyClass.prototype.initialize = function () {
    this.myVideo = document.getElementById("myVideo");
    this.myVideo.addEventListener("ended", this.onMyVideoEnded, false);
    this.myVideo.play();
}

MyClass.prototype.onMyVideoEnded = function (event) {
    // cannot remove event listener here
    // this.myVideo.removeEventListener("ended", this.onMyVideoEnded, false);
}

有没有办法将处理程序保留为 Class.prototype 函数并添加和删除侦听器。我需要实例化和创建大量此类对象，并且在将匿名函数作为事件处理程序保留时，我担心内存泄漏和对象持久性（所有先前创建的对象都会收到“结束”事件）。

或者我应该考虑一种不同的方法（内联函数，在初始化函数内部，作为事件处理程序）。这些确实会影响可读性和一致性，所以我想不惜一切代价避免它们。

【问题讨论】：

处理程序是一个监听器，对吧？我不太明白你的问题......
处理程序是一个函数，它在事件触发时执行。侦听器是一种语言结构，当它 [侦听器] 检测到事件已触发时，它调用处理函数（我不确定事件侦听器在后台是如何工作的）。

标签： javascript oop dom-events

【解决方案1】：

你需要bind你的函数onMyVideoEnded你附加它的上下文：

例如：

this.myVideoEndedHandler = this.onMyVideoEnded.bind(this);
this.myVideo.addEventListener("ended", this.myVideoEndedHandler, false);

要删除侦听器，还可以使用存储的处理程序：

this.myVideo.removeEventListener("ended", this.myVideoEndedHandler, false);

这是因为当事件触发你的函数 onMyVideoEnded 得到错误的 this 参数。

【讨论】：

foo.bind(bar) != foo.bind(bar)，除非您存储对最初绑定的侦听器的引用，否则您将无法正确删除事件侦听器。
这是优雅且非常直接的，尽管来自 ActionScript 背景并非微不足道。我谢谢你，哦，非常感谢！我又一次感受到了生活的乐趣。 :}

【解决方案2】：

我用这个：

this.element.handler = handler.bind(this);
this.element.removeEventListener('event', this.element.handler, false);
this.element.addEventListener('event', this.element.handler, false);

或使用 WeakMap 对象：

var handlers = new WeakMap();

var self = this;
handlers.set(this.element, { handler: handler.bind(self) });

var handler = handlers.get(this.element).handler;
this.element.removeEventListener('event', handler, false);
this.element.addEventListener('event', handler, false);

【讨论】：