jQueryの.on（）メソッドは、inmediatly関数を呼び出す

Question

私はJavaScriptの専門家ではありません（それから遠い）と私はちょうどjQueryと面白い経験があります。私は、次のコードを持っている：

// show search forms 
    searchButton = jQuery('#show-search'); 
    searchForm = jQuery('#search-form'); 

    function toggleSearch() { 
     searchButton.button('toggle'); 

     searchForm.slideToggle(300, function() { 
       searchForm.find('#value').focus(); 
      }); 
    } 

    searchButton.on('click', toggleSearch()); 

ページのロード、#search-formが実際に起動しているが、それは（ボタンをクリックすなわち、実際に）関数を呼び出すことを必要とせず、滑り落ちます。

According to this post私はこのような関数を渡すことができます。

searchButton.on('click', toggleSearch); 

そして、私はこれをやっていたかのように同じことをするでしょう。

searchButton.on('click', function() { 
     toggleSearch(); 
    }); 

それはに動作します。両方の方法があります。

• なぜこれが機能し、なぜ最初のフォームを使用できないのですか？ （合格toggleSearch()）
• ランダムな値を持つ変数toggleFunctionがある場合はどうなりますか？それは関数の代わりに渡されませんか？

EDIT：私はthis excellent answerの承知しているが、それは「参照」の部分、また以前に割り当てられた変数の場合を説明していません。そのような場合には、無名の関数が必要ですか？私は毎回それらを使うべきですか？

Answer 1

()あなたがtoggleSearch()を使用する場合は、関数自体、.onに戻り値（あなたのケースでundefinedです※）がない渡している、あなたが機能を実行させます。

toggleFunctionは、toggleFunctionと呼ばれる別の変数があるのであれば、toggleFunctionが変更されます

var toggleFunction = function() {/*...*/}; 

と同じであり、関数名ですが、また、変数です。

Answer 2

toggleSearch()を使用すると、実際に関数が実行されており、関数の戻り値がハンドラとして使用されます。カッコを省略すると、関数への参照が渡され、イベントが発生したときに関数自体が呼び出されます。

"働く"という2つの機能の場合は、最初に説明したとおりです。 2番目の例では、無名関数リファレンスをハンドラとして渡しています。この無名関数は、メソッドが呼び出されたときにメソッドを実行します。定義されていないときは実行されません。したがって、関数参照のみを渡すのと同じ方法で動作します。関数に引数を渡す必要がある場合は、2番目の方法がその方法です。

searchButton.on('click', function() { // this is the handler 
    // this is run when the hander executes 
    toggleSearch('some parameter', 'some other parameter'); 
});