jQueryのevent検出 on, bind, delegate, liveメモ

jQuery 1.X系を触っていた時に違いがよくわからなったのでメモ．

なお， - bind: 3.0でdeprecate（非推奨） - live:1.7でdeprecate, 1.9 でremove - delegate: 3.0でdeprecate

となっているので，基本的にonを使えばいい．

bind

既に表示されている要素のeventしか検出されない．つまり，後で動的に追加された要素のeventは検出できない

例.テキストをクリックすると，テキストが追加される．bindの場合，追加されたテキストをクリックしてもeventは検出されない．：

See the Pen baWVwV by Cartman (@Cartman0) on CodePen.

‘bind‘と違って，後で動的に追加された要素のeventも検出できる．

使い方としてｈ，検出したい要素の範囲（親要素）と検出したい要素のセレクタの2つを指定する．

例. bindに対して，delegate`の場合，追加されたテキストをクリックしてeventを検出できる：

See the Pen delegate test by Cartman (@Cartman0) on CodePen.

liveは，$(document).delegate(); と同じ．既に削除されている．

onは，今までのbind, delegate, liveをすべて表現できる．なので，event検出には基本的にonを使ったほうがいい．

‘on‘で表現すると

$("検出したい要素").bind("event", function(e){/*handler*/});

$("検出したい要素").on("event", function(e){/*handler*/});

$("検出したい範囲").delegate("検出したい要素", "event", function(e){/*handler*/});

$("検出したい範囲").on("event", "検出したい要素", function(e){/*handler*/});

$("検出したい要素").live("event", function(e){/*handler*/});

$(document).on("event", "検出したい要素", function(e){/*handler*/});

例：

See the Pen on test by Cartman (@Cartman0) on CodePen.