PRESSMAN*Tech

HTML5, CSS3からWordPress, AWS, Elasticsearchまで。プレスマンのスタッフが綴る技術ブログ。

jQueryのbindについて

jQueryjQueryのclick()やchange()などのイベント系の関数超便利ですよね。
実際にこれが何をやっているかと言うと下記のように単にclickなどのイベント名でbindしているだけなんです。
つまり
click(fn) イコール bind(“click”,fn)
というわけです。
そして、引数がなければtriggerが起動してます。


jQuery1.4.2 2594行目

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error").split(" "), function( i, name ) {
// Handle event binding
jQuery.fn[ name ] = function( fn ) {
return fn ? this.bind( name, fn ) : this.trigger( name );
};
if ( jQuery.attrFn ) {
jQuery.attrFn[ name ] = true;
}
});

jQuery1.4.3 2900行目

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error").split(" "), function( i, name ) {
// Handle event binding
jQuery.fn[ name ] = function( data, fn ) {
if ( fn == null ) {
fn = data;
data = null;
}
return arguments.length > 0 ?
this.bind( name, data, fn ) :
this.trigger( name );
};
if ( jQuery.attrFn ) {
jQuery.attrFn[ name ] = true;
}
});

1.4.2と1.4.3のソースをつけたのには訳があります。というか見れば同じ箇所でソースが微妙に違っているのがわかりますね。元々bindは
bind(type, [data], fn)
のような形でコールバック関数にデータを渡すことができます。dataは省略できてその場合はイベントに関数をバインドするだけです。
しかし、1.4.2まではclickイベントにデータを渡すときはbind(“click”,data,fn)と書かなくてはなりませんでした。しかし1.4.3以降は
click(data,fn)
と書けばいいということになります。これはjQuery日本語リファレンスには書いてありません。

jQuery日本語リファレンスは非常によくできていてわかりやすいので使っている人も多いはずですよね。(というかこれがないと泣いてしまう)ただ、最近の変更点については書かれていないので自分でソースを読むと新たな発見があります。
例えば、jQuery1.6.2のbindについて書かれた箇所(oneと一緒に書かれているのでわかりにくいかも)

jQuery.each(["bind", "one"], function( i, name ) {
jQuery.fn[ name ] = function( type, data, fn ) {
var handler;
// Handle object literals
if ( typeof type === "object" ) {
for ( var key in type ) {
this[ name ](key, data, type[key], fn);
}
return this;
}
if ( arguments.length === 2 || data === false ) {
fn = data;
data = undefined;
}
if ( name === "one" ) {
handler = function( event ) {
jQuery( this ).unbind( event, handler );
return fn.apply( this, arguments );
};
handler.guid = fn.guid || jQuery.guid++;
} else {
handler = fn;
}
if ( type === "unload" && name !== "one" ) {
this.one( type, data, fn );
} else {
for ( var i = 0, l = this.length; i < l; i++ ) {
jQuery.event.add( this[i], type, handler, data );
}
}
return this;
};
});

これを読むとbindの一つ目の変数にObjectを渡して複数のイベントを一気にバインドできるのがわかります。つまり

var data = {hoge:"hoge",piyo:"piyo"};
$('#hoge').mousedown(data,function(e){
//処理内容
});
$('#hoge').mouseup(data,function(e){
//処理内容
});

var data = {hoge:"hoge",piyo:"piyo"};
$('#hoge').bind({
mousedown:function(e){/* 処理内容 */},
mouseup:function(e){/* 処理内容 */}
},data);

のように書けるということです。

で、bindにデータを渡すと何が嬉しいのかは次回。

投稿者:taichi

taichi の紹介

何でもやりますが、一応プログラマです。
このエントリーをはてなブックマークに追加

私たちと一緒に働きませんか?

株式会社プレスマンでは、プログラミングが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。まずは募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。

プレスマンの採用情報を見る →

コメントは受け付けていません。

▲ 先頭へ戻る