はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

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

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

.bind() | jQuery API Documentation

  • 1.4で追加
  • 3.0でdeprecated

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

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

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

delegate

.delegate() | jQuery API Documentation

  • 1.4.2で追加
  • 3.0でdeprecated

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

使い方としてh,検出したい要素の範囲(親要素)と検出したい要素のセレクタの2つを指定する.

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

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

live

.live() | jQuery API Documentation

  • 1.3で追加
  • 1.7でdeprecated
  • 1.9 でremove

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

on

.on() | jQuery API Documentation

  • 1.7 で追加

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

‘on‘で表現すると

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

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

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

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

例:

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