Difference between 2 jquery binds

Question

function runSomething () {
  // some stuff happens
}

$(selector).bind('event', runSomething());

$(selector).bind('event', runSomething);

What's the difference between these 2 versions of the bind?

Here's a practical example: http://jsbin.com/icajo/edit

Can somebody explain why works the way it does.

I'm trying to get multiple buttons to run the function upon the event, what should I do?

Answer 1

In first case you bind result of runSomething() call, in second - function itself.

update
@JSNewbie, run this and tell what you see in each alert.

function runSomething () {
    return 3;
}

var a1 = runSomething();
var a2 = runSomething;
alert(a1);
alert(a2);

Answer 2

In the first line the function runSomething is executed within the bind statement, and that what it returns is bound to the event, for example if your runSomething function returns another function then that function is bound, and will be executed upon the event.

On the second line the runSomething function is not executed at that line, and is only only execute when "event" happens.

Answer 3

$(selector).bind('event', 'runSomething()'); (notice the extra quotes around 'runSomething()') run the function runSomething() when the event is received.

$(selector).bind('event', runSomething); sets the function runSomething() as the callback function for the event, which means it will receive whatever parameters are included in the event, often this is useful for currentTarget (so you can use the same event on many buttons) or to get specific information from the event (mousemove returns the X,Y location of the mouse as it is triggered).

So if you needed to access the event object that is returned when the event is triggered, the first version wouldn't work properly.

function runSomething(event){
   console.log(event); // this would show the event object if the second code is used.
}

Answer 4

In javascript functions are treated as variables. Adding the "()" will call the function, and pass the result of the function (which could be 'undefined' if the function returns nothing). The second is the proper way of using the bind method, because it gives a handle to the function to call when the event is triggered.

Answer 5

In javascript, passing a set of parameters to a function invokes the function, it gets evaluated to the functions return value.

var test = function() { return 1; } // Creates a new function that returns 1
alert(test.toString()); // => "function () { return 1; }"
alert(test().toString()); // => "1"

Even alert itself is just a variable that points to a function.

alert(alert); // => "function alert() { [native code] }"

So, if the first example, when calling runSomething(), it immediately evaluates that function, then passes the return value as a parameter to bind(). In your case, it evals the alert() as the page is loaded, then passes undefined to bind()

In your second example, using the variable runSomething the function itself is passed to bind(). Bind then uses that function only when the event has been raised.

To really blow your mind, you could have function that returns a function, then evaluating the function (like in your first example) is correct... For example

var counter = 0;
function GenerateNext() {
   counter++;
   return new Function("alert(" + counter + ")");
}

a = GenerateNext();
b = GenerateNext();
b() // will alert 2
a() // will alert 1

$(selector).bind('event', GenerateNext());    // alert 3
$(selector).bind('event', a);   // alert 1
$(selector).bind('event', b);   // alert 2

It just all depends on what you are trying to do; pass the function itself, or pass the return value of the function.