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?

My custom object:

//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) {

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?

回答1:

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

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

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

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:

• 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.

回答2:

Thank you @Bergi.

Here's option #2 from his answer. You can try this JSFIDDLE.

//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.customKeyDownHandler = null;
        this.customFocusHandler = null;
        this.init();
        this.isValid = true;
    }
};


/**
 * Initialize an event listener
 */
CE.prototype.addEvent = function (event, callback, caller) {
    'use strict';
    var handler;
    // check for modern browsers first
    if (typeof window.addEventListener === 'function') {
        this.element.addEventListener(event, handler = function (e) {
            callback.call(caller, e);
        }, false);
        return handler;
    }
    // then for older versions of IE
    this.element.attachEvent('on' + event, handler = function (e) {
        callback.call(caller, window.event);
    });
    return handler;
};


/**
 * init object
 */
CE.prototype.init = function () {
    'use strict';

    this.customKeyDownHandler = this.addEvent('keydown', this.onCustomKeyDown, this);
    this.customFocusHandler = this.addEvent('focus', this.onCustomFocus, this);
};

/**
 * remove an event listener
 */
CE.prototype.removeEvent = function (event, callback) {
    'use strict';
    this.element.removeEventListener(event, callback, false);
};


/**
 * destroy object
 */
CE.prototype.destroy = function () {
    'use strict';
    this.removeEvent('keydown', this.customKeyDownHandler);
    this.customKeyDownHandler = null;
    this.removeEvent('focus', this.customFocusHandler);
    this.customFocusHandler = null;
};

/**
 * keydown event handler responds to arrow keys
 */
CE.prototype.onCustomKeyDown = function (e) {
    'use strict';
    // if (e.keyCode === 46) { e.preventDefault(); alert("Del key is invalid"); return false; }
    alert("Hey, easy there! Not so hard!");
    return true;
};

/**
 * focus event handler
 */
CE.prototype.onCustomFocus = function (e) {
    'use strict';
    // if (e.keyCode === 46) { e.preventDefault(); alert("Del key is invalid"); return false; }
    alert("Welcome!");
    return true;
};


ce = new CE('myID'); // allocate custom editor

// do something

// input element will have default behavior, event handlers are removed
ce.destroy();

来源：https://stackoverflow.com/questions/28386665/how-to-use-removeeventlistener-when-event-handler-is-a-prototype-function