jQuery1.7がリリースされたと聞いて ― on()/off() メソッドの追加

暇さえあればレンタルサーバー借りてドメイン取って何か作りたいと思っている。
けどその前にPC買わなきゃかな・・・。

こんばんは、たすくです。

jQuery1.7が出たと聞いて、いつもはそんなに更新情報をチェックしたりしないんですが、
ちょっと時間ができたのでちゃんと読んでみました。


やはり注目すべきは.on() .off()メソッドでしょう！

The new .on() and .off() APIs unify all the ways of attaching events to a document in jQuery — and they’re shorter to type!

新しい.on()と.off()のAPIは、ドキュメントにjQueryでイベントを紐付ける全部の手段を統合するよ！
しかも、文字数もマジで短くなったよ！
（※意訳です）
http://blog.jquery.com/2011/11/03/jquery-1-7-released/

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For equivalents to older jQuery event methods, see .bind(), .delegate(), and .live().

.on()メソッドは、今選択されているエレメンツにイベントハンドラを紐付けるぜ！jQuery1.7では、イベントを紐付けるための全ての機能を提供するんだ。昔のbind()、delegate()、live()のようなメソッドと同等のね！
（※意訳です）
http://api.jquery.com/on/

結局どういうことなのよ

今まで、例えば<div>タグにクリックイベントを仕込もうと思ったら、

$('div').click(fn);
$('div').bind("click",fn);
$('div').live("click",fn);
$(document).delegate("div","click",fn);

とか色々あったんですよね。
将来出現する<div>タグにも効くのはlive()やdelegate()を使った書き方です。

これはクリックイベントは$(document)オブジェクトに仕込んで、
targetが<div>になっているかを見るような作りになっているそうです。
詳しくはこのあたりを参照ください。

【jQueryの.bind(), .live(), .delegate()の違い | JSer.info】
http://jser.info/post/3307464125

【The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog】
http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

個人的にはlive()ぐらいまで追えてたんですが、
delegate()とかは聞いたことがあっても使ったことはありませんでした。

.on()だけ覚えれば色々できるらしいよ

今回のバージョンから、それを統一できるようにしたんだそうです。
例えば、

(function($){
    var clickHundler = function(){
        $('body').append("<div>追加！</div>"); //★
    }

    $(function(){
        $('div').on("click",clickHundler);
    });
})(jQuery);

こう書くと、bind()とかと一緒で、★の部分で新たに追加された<div>タグにはクリックイベントはつきません。

でも、

(function($){
    var clickHundler = function(){
        $('body').append("<div>追加！</div>"); //★
    }

    $(function(){
        $(document).on("click","div",clickHundler);
    });
})(jQuery);

こう書くと、$(document)オブジェクトで持ってるので、
delegate()と同じことができる、ということだそうです。（多分）
★の部分で新たに追加された<div>タグにも、クリックイベントがつきます。

events-mapも地味に便利っぽいよ

.on( events-map [, selector] [, data] )
events-map　A map in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

events-map　1つのマップに対して、文字列のkeyに1つの、またはスペースで区切られた複数のイベントタイプやオプションの名前空間を指定して、valueにはイベントに対応して呼ばれるハンドラを指定するんだよ。
（※意訳です）
http://api.jquery.com/on/

つまりこういうことですかね？

(function($){
    var eventMap = {
        "click":function(){
                    $('body').append("<div>クリックで追加！</div>");　//★
                },
        "mouseover mouseout":function(){
                    $('body').append("<div>マウマアウトやオーバーで追加！</div>");
                },
        "click.testA":function(){
                    alert("1回目だけ呼ばれたらここの部分はもうoff()する！"); //▲
                    $(document).off("click.testA");
                }
    }

    $(function(){
        $(document).on(eventMap,"div");
    });

})(jQuery);

eventMapは、イベント名と関数のセットになっているオブジェクトです。
イベント名はスペースで区切れば複数のイベントタイプに1つの関数を紐付けることもできます。

しかも、"click.testA"みたいにイベント名に独自の名前空間をつけることもできるから、
主にoff()する関数を特定する時に便利！
（1回目のクリックでは★も▲も呼ばれるけど、2回目以降は★しか呼ばれない）

これはコードがスッキリするわー！

まとめ

これからjQueryを始める人は、on()とoff()だけ知ってればいいっぽいので、
今までよりずっとわかりやすくなりましたね！

何より、
on()とoff()って名前がわかりやすい。笑

無名関数で書いても、
$('div').on("click",function(){
　　　　//hoge
　　})
になるわけじゃないですか。もうほとんど"onclick"ですよね。


そんなわけで、非常に使いたくなる今回のバージョンアップのお話でした！
誰か手軽にjQueryをバージョンアップする方法を知りませんか・・・・？