jQuery1.9以上はbind・live・delegateをonで書きましょう的な話

すごく今更な話ではあるけれども、
jQuery1.9以上になると、live関数が廃止されたりしてソースの書き換えが必要になる。
そこでよく使われるbind(イベントの付与)の書き方を書いていこうと思う。

■bindの書き換え

//1つのイベントだけ付与する場合
$(".hoge").on("click",function(e){
  // click event
});

//複数のイベントを付与する場合
$(".hoge").on({
  mouseover:function(e){
    //mouseover event
  },
  mouseout:function(e){
    //mouseout event
  }
});

bind()がon()になった感じで大丈夫。

■liveの書き換え

//1つのイベントだけ付与する場合
$(document).on("click","a",function(e){
  //click event
});

//複数のイベントを付与する場合
$(document).on({
  mouseover:function(e){
    //mouseover event
  },
  mouseout:function(e){
    //mouseout eveent
  }
},"a");

これであれば後から生成されたDOM要素にもイベントが付与される。

■delegateの書き換え

//1つのイベントだけ付与する場合
$(".foo").on("click","a",function(e){
  //click event
});

//複数のイベントを付与する場合
$("foo").on({
  mouseover:function(e){
    //mouseover event
  },
  mouseout:function(e){
    //mouseout eveent
  }
},"a");

live()をon()に書き換えたのとほぼ同じ。
そもそものlive()とdelegate()の使い分けって？っていうのは後述。

■unbind、undelegate、dieの書き換えoff

//全イベントを削除
$(".hoge").off();

//あるイベントのみ削除
$(".hoge").off("click");

■delegate()とlive()の違い

今ではon()とoff()なのでそこまで気にする必要はないけど、
そもそものlive()とdelegate()の違いとしては下記のような感じ。
・liveはdocumentから見た特定の要素になるけれど、delegateはある要素からみた特定の要素
・パフォーマンスとしてはdelegate > live

あまりメモリを消費したくないとか、documentからの指定だとたまにここには付けたくないのに…
といったことが起こってしまうので、基本的にはdelegate推奨だと思う。
もちろん最新版のjQueryであるならばそんなこと気にせずにon()で書いてあげればいいだけではあるけれども。

ということでこうやって書き換える事が可能。
googleのCDNライブラリを使っているとバージョンが自動的に変わってくれるから便利だが、
だからこそ消えていくAPIがあるので、これらを修正しないといけなかったりする。

CDNからjQueryを読み込んでいるサイトの場合は下手すると、動いていなかったとかあると思う。
なのでそういった場合にはCDNの読み込みバージョンを落とすか、
CDNではなくjQueryをローカル保存形式で使うか、
今記述しているjQueryの修正をする必要があるのではないかと。