2013年5月4日土曜日

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の修正をする必要があるのではないかと。

Adsense