click()とon('click', function())の違い #JavaScript

覚えたてのjQueryを使っていて、「click()?.on?なにが違うんだ」と、とても気になったので、まとめました。

この記事を読んで理解できること

$('p').bind('click', function(){
  //処理
});
$('p').unbind('click');

onを使うと、

$('p').on('click', function(){
  //処理
});
$('p').off('click');

$('.parent').delegate('foo', 'click', function(){
  //処理
});
$('p').undelegate('foo', 'click');

onを使うと、

$('.parent').on('foo', 'click', function(){
  //処理
});
$('p').off('foo', 'click');

$('p').live('click', function(){
  //処理
});
$('p').die('click');

onを使うと、

$('document').on('click', function(){
  //処理
});
$('document').off('click');

bindを利用するとページ表示時にすでに存在する要素に対してイベントを設定する。その為、後から追加された要素にはイベントが設定できない。

例えば、<div>></div>の要素の中に<p></p>の要素を追加したとすると、

$('p').bind('click', function(){
  //処理
});

このようにbindで記述してもクリックイベントは実行できない。

$('div').delegate('p', 'click', function(){
  //処理
});

と親要素のdivにイベントを設定することで、間接的にイベントを設定する事ができる。

liveとdelegateの違いは、delegateの中にliveが含まれていると考えると楽。じゃあなんでdelegateがあるのかというと、実行速度が早い！
liveは内部でdelegateを実行しているので、一歩遅い！

~~実行順~~
~~bind→delegate→live~~

~~実行速度~~
~~delegate→live→bind~~
~~（とはいえbindを避けるほどの差はないらしい。）~~

2017/02/02:@smzk様からご指摘頂きましたので、修正致します。
イベントをセットする要素に応じてイベントの発生順決まるため、一概にはこの実行順とは限らないです。

$('.foo').on('click blur', function(){
  //処理
});

スペース区切りで記述していく。

$(.foo).on({
  'mouseenter': function(){
    //処理内容
  },
  'mouseleave' : function(){
    //処理内容
  });

イベントデリゲートで複数イベントを設定する。

$(.parent).on({
  'mouseenter': function(){
    //処理内容
  },
  'mouseleave' : function(){
    //処理内容
  }, '.foo');

特にこだわりが無ければ、.onを使えば良いんじゃないですかね。