JavaScript code explanation (events + canvas) [sigma.js]

Question

Here is some code that I have from sigma.js:

function f(event)
    {
        sigInst.iterNodes(function(n){
        node = n;
        },[event.content[0]]);

        alert();
    }


sigInst.bind('click',f).bind('outnodes',f).draw();

I don't understand this:

1. from where function f gets the event? no one passes it.

2. line },[event.content[0]]);

Can I add events to canvas elements? sigma.js draws a canvas and then (I don't understand how) there is an event listeners on click and outnodes. How does this happens?

Thanks

Answer 1

from where function f gets the event? no one passes it.

it is sent automatically by the bind function - when the handler is executed.

line },[event.content[0]]);

It's just an argument for the iterNodes function which is an array of size 1 which has the value of a property named content which is also an array , so it takes its first cell.

Answer 2

Sigma uses its own custom events dispatcher. As you can see here:

https://github.com/jacomyal/sigma.js/blob/master/src/classes/eventdispatcher.js#L129

It dispatches events with certain parameters of its own. When you bind to something, it always is executed through some sort of dispatch/trigger. The dispatch/trigger, as seen in the link, adds custom parameters which is why you're able to access content.