ちょっとハマったのでメモ。
分かってしまえば非常に単純な話なんだけど、たぶん多くの人がハマるんじゃないかなというポイントをまとめてみました。
元ネタはこちらになります。
》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 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 yet.