javascript - What is the difference between someFunction() and someFunction in an event ? - Stack Overflow

admin管理员组

文章数量:1289516

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.

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.

• javascript
• jquery

Share Improve this question Follow edited May 23, 2017 at 12:29 CommunityBot 111 silver badge asked Jul 8, 2013 at 21:00 AkheloesAkheloes 1,37233 gold badges1111 silver badges2929 bronze badges 3

• The answer in this thread does not answer your question, but the question in that thread does. Read it carefully again. – Zim84 Commented Jul 8, 2013 at 21:02
• () calls a function, why is it unexpected that the function gets called when you write onHover_() :o – Esailija Commented Jul 8, 2013 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 Commented Jul 8, 2013 at 21:19

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

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.

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.

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.

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.

本文标签： javascriptWhat is the difference between someFunction() and someFunction in an event Stack Overflow