[jQuery]マウスイベントで「this」を自由に変更したい。jQuery.proxy()の使いどころ

Posted 2012年3月24日 | Auther dada | Category PC・デジタル | Tag タグ: ,
Twitterにツイートする Facebookでシェアする はてなブックマーク

ちょっとハマったのでメモ。
分かってしまえば非常に単純な話なんだけど、たぶん多くの人がハマるんじゃないかなというポイントをまとめてみました。

元ネタはこちらになります。
》jQuery1.4から追加されたjQuery.proxy()を試してみる | THE HAM MEDIA BLOG

jQueryを使って click()、hover()などのイベントを扱う時、多くのサンプルコードではこんな感じに書いてますよね。

$('.button').click(
  function(){
    alert( this.id );
  }
);

大抵のものはこのままでも問題ないのですが、クラスやオブジェクト内の関数を扱いたい時にちょっと困ったことになります。

var month = {
  Jan : 'January',
  showMonth : function(){
    alert( this.Jan );
  }
};

$('.btn1').click( month.showMonth );

これは実行すると undefined になります。
試せるように JSFIDDLE に公開しました。便利なサービスですねー。

jQuery.proxy()を使う

jQuery 1.4から追加された proxy() を使うと、「this」の対象オブジェクトを指定できるようになります。

var week = {
    Mon : 'Monday',
    showDay : function(){
        alert( this.Mon);
    }
};

$('.btn2').click( jQuery.proxy( week.showDay, week ));

》実際に試してみる

下記の記事がとても参考になります。

》jQuery1.4から追加されたjQuery.proxy()を試してみる | THE HAM MEDIA BLOG
》いつの間に実装されていたjQuery.proxy等という便利な機能 | Mach3.laBlog

引数を指定したい時はどうするの?

さてここまでは他のサイトにも書いてあったのですが、引数を渡したい時はどう記述したらいいのかというサンプルが見付かりませんでした。
おそらく jQuery使いにとっては当たりまえすぎるからサンプルがないのかもしれません。

var keion = {
    Azusa : 'Guitter',
    Mio : 'Base',
    Ritsu : 'Dram',
    showInstrument : function( id ){
        alert( this[id] );
    }
};

$('.btn3').click(
    jQuery.proxy(
        function( e ){
            keion.showInstrument( e.target.id );
        },
        keion
    )
);

》実際に試してみる

答えは単純。イベントハンドラ共通の引数(多くのサンプルでは「e」と記載されてるやつです)から「target」プロパティを拾うだけです。

もっと詳しい記事はどこかにあると思いますが、見付からなかったのでここにメモっておきます。

関連する記事

No Comments »

No comments yet.

Leave a comment

カテゴリー