使用object's方法作为事件处理程序，如何删除它?

Using an object's method as an event handler, how do I remove it?

本文关键字：何删除 删除 程序 事件处理 object 方法 使用      更新时间：2023-09-26

如果我注册一个对象的方法作为事件处理程序，我不能删除它。我是不是漏掉了什么明显的东西，或者这是不可能做到的?

function Test() {
    
    document.body.addEventListener( 'click', this.handler.bind( this ), false );
    
}
Test.prototype.handler = function() {
    document.body.innerHTML += '.';
    document.body.removeEventListener( 'click', this.handler.bind( this ), false );
};
new Test();
body {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    font-size: 30px;
}

当您使用Function.prototype.bind时，您创建了一个新函数。存储您自己对函数的引用，然后使用它来订阅和取消订阅。

var obj = {
    method: function () {
        return this.prop;
    },
    prop: true
};
var getProp = obj.method.bind(obj);
myHtmlElement.addEventListener("click", getProp, false);
myHtmlElement.removeEventListener("click", getProp, false);

每次调用bind，将生成一个不同的函数:

func.bind(obj) === func.bind(obj); // false

因此，removeEventListener不知道要删除哪个事件监听器。

相反，您应该存储新函数: 
this.realHandler = this.handler.bind(this)

然后，您将能够添加或删除this.realHandler事件侦听器。

相关文章：