3

In this code : 

    function onHover_(){
        $('p').css('background-color', 'red') ;
    }

$( document ).ready(function() {
    //1    
    $('p').click(onHover_);
    //2
    $('p').click(onHover_());
  });

In the first line the onHover_ function gets executed (as I expected) after I'd click on a <p> tag. In the second line the onHover_() gets exectued right away after the document is ready, meaning it doesn't wait for an click event !

Simply, why ?

Here's a jsFiddle to test the code.

Found this thread on STO but the result is not what the accepted answer would've prediced.

Community
  • 1
  • 1
Akheloes
  • 1,352
  • 3
  • 11
  • 28
  • The answer in this thread does not answer your question, but the question in that thread does. Read it carefully again. – Zim84 Jul 08 '13 at 21:02
  • `()` calls a function, why is it unexpected that the function gets called when you write `onHover_()` :o – Esailija Jul 08 '13 at 21:02
  • The question in that other thread was about inline javascript, where "onclick" runs javascript when clicked, not a function. In your case, you are already running javascript and running a function when clicking something – Jaibuu Jul 08 '13 at 21:19

5 Answers5

7

onHover_ is a function.

onHover_() executes or calls the function

So when you assign a handler to a event i.e( click, change) , you want the function to be called at the time the event occurs.

But not at the point when the event is bound.

So in this case

$('p').click(onHover_());

The background color for the p tags is changed immediately , instead it should be happening at the time when you click it. That is happening because of () that follows the function name ( It immediately calls the function ).

If you are still confused with the syntax

$('p').click(onHover_);

is same as

$('p').click( function() {
     $('p').css('background-color', 'red') ;
});

The callback is an anonymous function which gets executed when the particular event is triggered or performed.

Sushanth --
  • 55,259
  • 9
  • 66
  • 105
3

The first one $('p').click(onHover_); is the right syntax, using function refrence as callback. The second one is wrong as calling function without waiting the handler click to be fired and using returned result (if any) as callback.

A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • This is by far the clearest to me. Still, why would a call be executed inside an event handler before the event is fired ? – Akheloes Jul 08 '13 at 21:07
  • @Gloserio because it is evaluated, just look at this scenario `myfunc(isValid(), onject)` here inside `myfunc` would you like to see the result of `isValid()` which returns a boolean flag or the function `isvalid()` itself? – PSL Jul 08 '13 at 21:13
  • @PSL : since I'm calling myfunc (thus the `myfunc(,)` call ) I would say I need a parameter, therefore I would go for a call of the `isvalid` function, hence `isvalid()`, right ? – Akheloes Jul 08 '13 at 21:20
  • @Gloserio Yes you are right, you don't want myfunc to execute isValid later, and consider event registering the reverese case here, you want your function to be executed as callback at a later point of time not when you pass it in as callback argument. – PSL Jul 08 '13 at 21:24
  • 1
    @Gloserio yes in your case, but if you have a function which returns a reference for another function then you can invoke that. Check this http://jsfiddle.net/7dg2W/ or rather this http://jsfiddle.net/TTqAp/ for more clarity – PSL Jul 08 '13 at 21:31
  • 1
    @PSL : great ! Thanks for the discussion, very instructive :) ! – Akheloes Jul 08 '13 at 21:37
2

onHover_ passes a reference to that function. This is the correct invocation in your case.

onHover_() calls the function (immediately), and passes its return result as the click handler.

In the vast majority of cases you need the former. The exception would be if onHover_ itself returns a reference to a callback function, e.g.

function makeHoverFunc() {
    return function(e) {
         ...
    }
}

$('p').on('click', makeHoverFunc());

the (occasional) advantage of the latter being that you can pass parameters to the makeHoverFunc call that will be used within the actual callback.

Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • _"The exception would be if onHover_ itself returns a callback function reference."_ would you please care to explain this further ? Or maybe an exemple. Thanks ! – Akheloes Jul 08 '13 at 21:09
  • 1
    @Gloserio that would be if you had `function onHover_() { return function(e) { ... } }` – Alnitak Jul 08 '13 at 21:10
2

In JavaScript, a function is an object that you can pass around, just like the number 4 and the string 'foo' are.

In the line marked //1, you are passing the function named onHover_ to the click method. (The click method will execute the function later, when you click on a <p>)

In the line marked //2, you are executing the function named onHover_ (signified by the brackets, ()), and passing the result of that execution to the click method.

Brant Bobby
  • 14,956
  • 14
  • 78
  • 115
0

The difference is, basically, when the function is triggered.

//1    
$('p').click(onHover_);

Runs the onHover_ function when $('p') is clicked.

//2
$('p').click(onHover_());

Runs the function immediately, and clicking $('p') tries to execute what the function returns, in your case, It's $('p') again, which does nothing.

Jaibuu
  • 578
  • 3
  • 9
  • _"which does nothing"_ ? I would say it does something, except it's done already, no ? Would it not re-call the `onHover_()` and reapply the CSS (except it's already applied) ? – Akheloes Jul 08 '13 at 21:28
  • What it does is returning a jQuery object holding every p in your document.And nope It wouldn't re-call it's parent function or css application or any action for practical purposes. – Jaibuu Jul 08 '13 at 21:30
  • 1
    in this case onHover_ function returns nothing – A. Wolff Jul 08 '13 at 21:31
  • @roasted : I agree with you, unless we stay theoretical, in which case I think it returns `undefined`. – Akheloes Jul 08 '13 at 21:39