javascript - Remove an eventhandler in the handler itself - Stack Overflow

admin 管理员组

文章数量: 1086019

In short: I would like to bind the result of .bind as an arguement in it's own call

var bound = foo.bind(this,bound);

because I'm not sure how else to solve my problem.

The problem:

I have an item that is dependent on an array of other items. Once one of those items is removed I want to remove the dependent item, and remove all the listeners placed on the dependencies.

I'm struggling to remove the eventhandlers of the other dependencies. I'm trying to use bind, but since the handler function is the one that removes the listeners, I find that I would have to bind the result of the bind() call in it's own call as an argument. This does ofcourse not work.

The bind call bellow binds the unbound version of 'handler' as a parameter, and thus removeEventListener does not work as it is a different copy of the function.

The question is: can I use bind to do this and/or how can I otherwise solve this?

Im using eventemitter3, but it should be the same for any event library.

setHandlers(dependentItem,dependencies)
{
    var handler = this.onDependencyRemoved;
    handler = handler.bind(this,dependentItem,dependencies,handler);//bind itself as third argument
    dependencies.forEach(dependency => {
        dependency.addEventListener("removed",handler);
    });
}
onDependencyRemoved(dependentItem,dependencies,handler)
{
     dependentItem.remove();
     dependencies.forEach(dependency => {
          dependency.removeEventListener("removed",handler);
     });
}

edit:

Complete working example to run in nodejs:

const EventEmitter = require('events');
//const EventEmitter = require('eventemitter3');

class MyEmitter extends EventEmitter {
    remove() {
        console.log("I'm being removed, this should happen only once");
    }
}
var dependent = new MyEmitter();
var dependencies = [new MyEmitter(),new MyEmitter()];

var handler = (e) => removeHandler(dependencies,dependent,handler);

dependencies.forEach(dependency => dependency.once('removed',handler));

var removeHandler = function(dependencies,dependent,handler) {
    //remove the dependent object because one of the dependencies was removed
    dependent.remove();
    //remove the listeners from all of the dependencies
    dependencies.forEach(dependency => {
        console.log('before removing: '+dependency.listeners('removed').length);
        dependency.removeListener('removed',handler);
        console.log('after removing: '+dependency.listeners('removed').length);
    });
}

//should remove the dependent object
dependencies[0].emit("removed");
//should not do anything anymore since the listeners are removed
dependencies[1].emit("removed");

In short: I would like to bind the result of .bind as an arguement in it's own call

var bound = foo.bind(this,bound);

because I'm not sure how else to solve my problem.

The problem:

I have an item that is dependent on an array of other items. Once one of those items is removed I want to remove the dependent item, and remove all the listeners placed on the dependencies.

I'm struggling to remove the eventhandlers of the other dependencies. I'm trying to use bind, but since the handler function is the one that removes the listeners, I find that I would have to bind the result of the bind() call in it's own call as an argument. This does ofcourse not work.

The bind call bellow binds the unbound version of 'handler' as a parameter, and thus removeEventListener does not work as it is a different copy of the function.

The question is: can I use bind to do this and/or how can I otherwise solve this?

Im using eventemitter3, but it should be the same for any event library.

setHandlers(dependentItem,dependencies)
{
    var handler = this.onDependencyRemoved;
    handler = handler.bind(this,dependentItem,dependencies,handler);//bind itself as third argument
    dependencies.forEach(dependency => {
        dependency.addEventListener("removed",handler);
    });
}
onDependencyRemoved(dependentItem,dependencies,handler)
{
     dependentItem.remove();
     dependencies.forEach(dependency => {
          dependency.removeEventListener("removed",handler);
     });
}

edit:

Complete working example to run in nodejs:

const EventEmitter = require('events');
//const EventEmitter = require('eventemitter3');

class MyEmitter extends EventEmitter {
    remove() {
        console.log("I'm being removed, this should happen only once");
    }
}
var dependent = new MyEmitter();
var dependencies = [new MyEmitter(),new MyEmitter()];

var handler = (e) => removeHandler(dependencies,dependent,handler);

dependencies.forEach(dependency => dependency.once('removed',handler));

var removeHandler = function(dependencies,dependent,handler) {
    //remove the dependent object because one of the dependencies was removed
    dependent.remove();
    //remove the listeners from all of the dependencies
    dependencies.forEach(dependency => {
        console.log('before removing: '+dependency.listeners('removed').length);
        dependency.removeListener('removed',handler);
        console.log('after removing: '+dependency.listeners('removed').length);
    });
}

//should remove the dependent object
dependencies[0].emit("removed");
//should not do anything anymore since the listeners are removed
dependencies[1].emit("removed");

• javascript
• node.js
• function
• event-handling

Share Improve this question Follow edited Nov 18, 2017 at 22:29 Erik Philips 54.7k1111 gold badges131131 silver badges156156 bronze badges asked Oct 4, 2017 at 11:29 FlionFlion 11k1414 gold badges5252 silver badges7575 bronze badges 2

• Use event delegation and add one handler on a parent element. – Andreas Commented Oct 4, 2017 at 11:32
• @Andreas I'm in node.js. The items are models / ES6 class instances, not DOM items. – Flion Commented Oct 4, 2017 at 11:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +100

You cannot do this using bind, but you can do this relatively easy by using a closure - either directly for the function to be bound, or in your own helper function similar to bind. It's as simple as

const handler = (e) => this.onDependencyRemoved(dependentItem, dependencies, handler, e);

I'm not sure however why those two functions are methods of anything; they look rather static. It might make sense to make them methods of the dependentItem, in which case the arguments and even the whole handler don't need to be stored in closure variables, but could be made instance properties to be initialised in the constructor.

There are better ways to solve your problem that others have mentioned. However, there is a more fundamental problem with the code:

var bound = foo.bind(this,bound);

The value of bound in your code, at the time of execution, is undefined. This is the equivalent of just calling foo.bind(this) which is probably not what you want.

本文标签： javascriptRemove an eventhandler in the handler itselfStack Overflow