jQuery：名前付き関数のイベントハンドラに$（this）を渡します

Question

use named functions when binding an event handler to a javascript eventにお勧めします。関数をthisオブジェクトに渡す必要がある場合、どうすればよいですか？

例えば、どのように私は直接doFancyStuffを呼び出すことにより、以下の無名関数を置き換えます：

$(document).on('change', 'input.fancy-textbox', function() { 
    doFancyStuff($(this)); 
}); 

function doFancyStuff($textbox) { 
    // fanciness 
} 

あなたが他の規則を指摘するならば、私は上記のコードで破壊される可能性があります余分なポイント。明確にするために

---

、私はそうはい、私はちょうどこのような何か行うことができ、複数の場所から私の例ではdoFancyStuff()メソッドを呼び出したい：あるとして

$(document).on('change', 'input.fancy-textbox', doFancyStuff); 

function doFancyStuff() { 
    var $textbox = $(this); 

    // fanciness 
} 

Answer 1

私はそれが意見の問題だと言います。ここでは無名関数を使っても問題はありません。この機能は、複数の場所から呼び出されると、あなたはそれが動作する方法を変更することはできません、あなたのような何かをしなければならない場合は、しかし、

$(document).on('change', 'input.fancy-textbox', doFancyStuff); 

function doFancyStuff() { 
    // fanciness 
    var $textbox = $(this) 
} 

：これが唯一の場所doFancyStuffですが呼び出された場合、あなたはこれを行うことができますこれは：

$(document).on('change', 'input.fancy-textbox', doFancyStuffFromEvent); 

function doFancyStuffFromEvent() { 
    // fanciness 
    doFancyStuff($(this)); 
} 

function doFancyStuff($textbox) { 
    // fanciness 
} 

これは面倒です。

私はこの問題を解決するため $.proxy を使用

Answer 2

ちょうど関数を渡す：

$(document).on('change', 'input.fancy-textbox', doFancyStuff); 

function doFancyStuff() { 
    $(this).fancy(); // :-P 
} 

jQueryは、適切なコンテキストセットで関数を自動的に呼び出します。

---

other conventions you might be breaking：イベントの委任が必要ですか？そうでない場合、これは非常に良いだろう：

$('input.fancy-textbox').on('change', doFancyStuff); 

か、あなたも短い手のバージョン使用することができます：あなたが実際にあなたがそれを定義した場合、あなたの方法doFancyStuff内$(this)を使用することができるようになります

$('input.fancy-textbox').change(doFancyStuff); 

Answer 3

をあなたのイベントハンドラとして。 .on（）メソッドは、それに応じて、コンテキスト（これ）を設定します：

$(document).on('change', 'input.fancy-textbox', doFancyStuff); 

function doFancyStuff() { 
    // 'this' will be the changed input.fancy-textbox 
} 

Answer 4

あなたは無名関数と同じシグネチャを期待するdoFancyStuffを変更する必要があります。これをコード化した方法では、jQueryオブジェクトの単一のパラメータを期待しているように見えますが、これを無視します。しかし、イベントのパラメータは他のもの（イベントオブジェクト）であり、 "this"がターゲットです。関数をイベントターゲットとして使用する場合は、同じデータが必要です。したがって書き直し：

$(document).on('change', 'input.fancy-textbox', doFancyStuff); 

function doFancyStuff(e) { 
    var $textbox = $(this);  
    // fanciness 
} 

Answer 5

：

$(document).on('change', 'input.fancy-textbox', $.proxy(doFancyStuff, myChoiceofThis); 

function doFancyStuff(event) { 

    // $el is the same as $(this) when using anonymous functions 
    var $el = $(event.currentTarget); 

    // me === myChoiceOfThis 
    var me = this; // me === myChoiceOfThis 
} 

doFancyStuffは、オブジェクトメソッドである場合、そのようなmyChoiceOfThisような基準を与えることができることは非常に有用です。