5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

liveとon・・・何故liveメソッドは廃止になったのか?

Last updated at Posted at 2017-02-04

昔、jQueryにはliveという便利なメソッドがあり、よく使われていました。
イベント処理定義の時点で、そのオブジェクトが存在しなくてもよいという、非常に優れたメソッドでした。
しかし、バージョン1.7で非推奨となり、バージョン1.9では廃止になりました。
他にバージョン1.9で廃止されたメソッドにbind,delegateなどがあります。

○:正式 △:非推奨 ×:削除 -:無し

jQueryのバージョン bind live delegate on
1.7より前
1.7
1.9 × × ×

では、何故便利なliveメソッドが廃止されたのでしょう?
その理由を探る前に、liveメソッドの使い方を確認しておきしょう。

$('div').live('click', function(e) {
    console.log('clicked');
});

前述した通り、このliveメソッドの主体である$('div')が存在しなくても、定義ができ
尚且つ$('div')があるときだけ、コールバック関数が実行されます。

では、なぜ$('div')が存在しなくても、定義できるのでしょうか?

実はliveメソッドでイベント処理を定義すると、
処理が実行されるのは、documentのバブリングフェーズで実行されます。
documentがliveで定義されたイベントがあるか見張っていて、
そのイベントが発生し、且つイベントの発生元のDOMオブジェクトが指定したセレクタに含まれている時
登録したメソッドが実行されます。
delegateメソッドがわかる人であれば、
liveメソッドはdocumentにdelegateすると言ったほうが分かりやすいかもしれません。

赤矢印:キャプチャフェーズ 緑矢印:バブリングフェーズ
image0.png

しかし、liveメソッドのオブジェクトは$('div')なので、
divにイベントが到達した時に、メソッドが実行されると勘違いしてしまいますよね?
そう、これがまさにliveメソッドが廃止された理由なのです。

ちなみに、liveと同じことをバージョン1.9以上のjQueryで実装すると、以下のようになります。

$(document).on('click', 'div', function(e) {
    console.log('clicked');
});

説明は以上です。

5
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?