jquery - jQuery でクリック リスナーを割り当てるさまざまな方法

Question

次の違いは何ですか？

$("#some_div").click(customFunction);

と

$("#some_div").click(function() { customFunction(); });

...

function customFunction() {

    console.dir(this);

}

Answer 1

2 番目の例では、1 つは匿名関数、もう 1 つは customFunction という 2 つの関数を定義し、最初の例では、1 つの匿名関数しか定義していません。

Answer 2

実際には、おそらく違いはありません (現在、両方の方法で機能する場合)。

ただし、理論上は大きな違いがあります。

1. すべてのイベント ハンドラはevent引数を取得します。最初のケースでは、これは に渡されますがcustomFunction、2 番目のケースではそうではありません。つまり、最初のパラメーターの値は になりますundefined。
2. jQuery は、イベントのターゲットを としてイベント ハンドラーを呼び出しますthis。ただし、2 番目のケースの実行thisでcustomFunctionは、 は を指しwindowます。
3. customFunctionイベント ハンドラーがアタッチされてから実行されるまでの間に、変数の値を変更できます。これを行うと、最初のケースでは古い関数が実行されますが、2 番目のケースでは の新しい値が「尊重」されてcustomFunction実行されます。

一般に、2 番目のケースはより柔軟です (ただし、追加のネストされた関数呼び出しのオーバーヘッドも伴います)。犠牲 (ポイント #1 と #2) なしで追加の柔軟性 (ポイント #3 を参照) が本当に必要な場合は、次の構成を使用します。

$("#some_div").click(function() { customFunction.apply(this, arguments); });

これにより、元の引数とthis(外部関数の) 内部関数 ( ) 呼び出しの両方が使用されますが、イベント ハンドラーが実行されるまでにcustomFunctionの実装を交換することができます。customFunction

Answer 3

おそらく違いはありません。最初のオプションを除いて、宣言されている関数は 1 つだけです。