当事件处理程序是原型函数时，如何使用removeEventListener? [英] How to use removeEventListener when event handler is a prototype function?

问题描述

这是此

This is a follow-up to this question. The problem is that my call to removeEventListener does not work. What do I have to change below so that it does work?

我的自定义对象:

//Custom Editor Example with event listeners
var CE = function (id) {
    'use strict';

    // assume not a valid object
    this.isValid = false;
    this.element = document.getElementById(id);
    if (this.element !== null) {
        this.id = id;
        this.init();
        this.isValid = true;
    }
};


CE.prototype.addEvent = function (event, callback, caller) {
    'use strict';

    // check for modern browsers first
    if (typeof window.addEventListener === 'function') {
        return caller.element.addEventListener(event, function (e) {callback.call(caller, e); }, false);
    }
    // then for older versions of IE
    return this.element.attachEvent('on' + event, function (e) {callback.call(caller, window.event); });
};

CE.prototype.init = function () {
    'use strict';
    this.addEvent('keydown', this.onCustomKeyDown, this);
    // add other event listeners
};

这就是我要删除事件处理程序的方式:

This is how I'm trying to remove the event handler:

CE.prototype.removeEvent = function (event, callback, caller) {
    'use strict';
    caller.element.removeEventListener(event, callback, false);
};


CE.prototype.destroy = function () {
    'use strict';
    this.removeEvent('keydown', this.onCustomKeyDown, this);
    // remove other event listeners
};

这是处理事件的原型函数的签名.

And this is the signature of the prototype function that handles the event.

CE.prototype.onCustomKeyDown = function onCustomKeyDown(e) {

如果我理解正确，则removeEventListener不能用于删除作为匿名函数的事件处理程序.这是这里的问题吗?我需要更改呼叫addEventListener的方式吗?

If I understand correctly, removeEventListener cannot be used to remove event handlers which are anonymous functions. Is that the issue here? Do I need to change the way I'm calling addEventListener?

推荐答案

如果我理解正确，则removeEventListener不能用于删除作为匿名函数的事件处理程序.这是这里的问题吗?

If I understand correctly, removeEventListener cannot be used to remove event handlers which are anonymous functions. Is that the issue here?

是的.添加的函数是匿名函数表达式，而不是callback，因此用callback调用removeEventListener无效.

Yes. The function that is added is the anonymous function expression, not callback, so calling removeEventListener with callback will not work.

我需要更改调用addEventListener的方式吗?

Do I need to change the way I'm calling addEventListener?

是的，您需要以某种方式保留对实际处理程序函数的引用，以便以后可以将其传递给removeEventListener.基本上有两种方法可以做到这一点:

Yes, you somehow need to retain a reference to the actual handler function so that you can pass it to removeEventListener later. There are basically two ways to do this:

• 使用闭包并从addEvent返回remover函数，该函数将取消订阅.
• 将对事件处理程序的引用存储在某个地方，以便您可以在调用removeEvent方法时通过回调识别它，并确保它不会泄漏.

• use a closure and return a remover function from addEvent that will cancel the subscription.
• store a reference to the event handler somewhere so that you can identify it by the callback when removeEvent method is called - and make sure that it doesn't leak.

这篇关于当事件处理程序是原型函数时，如何使用removeEventListener?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！