Binding events to KineticJS objects using anonymous functions

Question

I am working on a project using Canvas and KineticJS. I load/create a number of nodes and edges, and have desired functionality when I interact with these under various circumstances.

At the moment I'm binding event handlers to these objects as they're created using anonymous functions. Something like this:

Node.prototype.setupNode = function(x, y) {

    this.visual.on('tap', function(e) {
        console.log(this.id);
    });

    ...
}

If I have a couple of event handlers to bind for each item, some of which are a fair number of lines of code, and I'm often binding a few hundred node and edge objects, are there more optimal ways of binding these events to these objects so that I can increase performance and decrease load time and resource usage?

Thanks in advance for any help whatsoever.

Answer 1

You can create a named function and then pass it's reference to the event binding function, like this:

function handleTap (e) {
   //your code
}

Node.prototype.setupNode = function(x, y) {
    this.visual.on('tap', handleTap);
    ...
}