東日本橋の制作・開発会社 プレスマンのスタッフブログ

PRESSMAN*Tech

プログラミング

jQueryのbindについて

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

この記事をシェアする:

-プログラミング
-,

Copyright© PRESSMAN*Tech , 2020 All Rights Reserved Powered by STINGER.