javascript - How to use removeEventListener when event handler is a prototype function? - Stack Overflow

admin管理员组

文章数量:1402854

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?

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?

• javascript
• event-handling

Share Improve this question Follow edited May 23, 2017 at 12:34 CommunityBot 111 silver badge asked Feb 7, 2015 at 19:56 KarlKarl 1,86411 gold badge2525 silver badges4040 bronze badges 1

• you are adding and removing different functions. – lujcon Commented Feb 7, 2015 at 20:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

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("Wele!");
    return true;
};


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

// do something

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

本文标签： javascriptHow to use removeEventListener when event handler is a prototype functionStack Overflow