プログラミング

jQueryのbindについて

この記事は2年以上前ですので、内容が古い可能性があります
jQuery

jQuery
jQueryの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にデータを渡すと何が嬉しいのかは次回。

この記事をシェアする:
◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇

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

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

採用情報を見る

-プログラミング
-,

© 2024 PRESSMAN*Tech Powered by STINGER