Question

我试图在我的项目中使用基于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函数并添加和删除侦听器。我需要实例化并创建这种类型的大量对象，并且害怕内存泄漏和对象持久性（所有先前创建的对象都会收到＆＃34;结束＆＃34;事件），而不会将匿名函数作为事件删除处理程序。

或者我应该考虑一种不同的方法（内联函数，在initialize函数中，作为事件处理程序）。这些确实影响了可读性和一致性，因此我希望不惜一切代价来避免它们。

Answer 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参数。

Answer 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);

JavaScript：将事件侦听器移除为Class.prototype函数

2 个答案: