THE HAM MEDIA BLOG

jQuery:1.3の新機能「live」を試してみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
javascript
jquery

jQuery:1.3の新機能「live」を試してみる

jQueryのバージョンが1.3になって増えた新機能「live()」
いまいちよく使い方がわかっていなかったので、
勉強をかねてのメモエントリーを残しておきます。



新機能live()

詳しくないので調べてみた。

んーいまいちピンとこないのですが、
追加した要素にもイベントが登録されるというのはわかった。

普通にclick()じゃダメ?

では、通常のとliveを使った場合と
その二つを作って見比べてみることにした。

まずは通常にclickを使った場合。

■通常のclickの場合

$(".live").click(function(){
    $(this).after('<p>ここをクリックしても何もない</p>');
});

■プレビュー

クリックで要素追加

見てわかると思うのですが、
最初からある部分以外でクリックしてもなにも変化ないです。
最初の部分であれば、何度クリックしても追加されるようになっていますが、
追加された部分はクリックしても何も反応しません。

live()の動作

では、liveを使ってみるとどうなるのか?

■liveを使ったclickの場合

$(".live").live('click',function(){
    $(this).after('<p class="live">ここもクリックで要素追加</p>');
});

■プレビュー

クリックで要素追加

先ほどのclickのみの時と違って、追加された要素でも
クリックイベントが割り当てられている。
なので、最初の要素だけでなく追加された要素をクリックしても
どんどん追加されるようになっている。

現時点で自分のサンプルとか含めてあまり使うようなことは
ないのかもしれないですが、徐々に使い方になれていこうと思う。



この記事へのコメント
WicketというJavaのフレームワークのAjax機能がサーバ側がHTMLを吐いて、JavaScript側(Wicket提供)がHTMLからCreateElementする構成になってて、その部分にClickイベントが必要だったときに苦労した事があります。
これがあれば使えたなーと思います。私の場合は結構特殊例だとは思いますが、動的に作成したElementにイベントを追加する処理を勝手にやってくれるのは便利な気がします。
ただ、動かしてみたわけじゃないですが、DOM操作イベントを監視してるでしょうからパフォーマンスは大丈夫なのか心配な感じですね。
Posted by u1tnk at 2009年01月27日
>u1tnkさん
なるほど、動的に作成したElementにイベントを勝手に追加してくれる機能はやはり便利になるケースというのがあるのですね!
今回追加のliveなどのパフォーマンスはかなりいいような英文がどこかにあったような…すみません、ソースわすれてしまいましたが、これを使うことでかなり速度面とかパフォーマンス部分で有効的なケースがある!というような内容だったはずです。
Posted by ハム at 2009年01月29日
遅くなりました。ちなみに無理矢理イベント取得して自力でやろうとすると、イベントの数が多くてえらい遅くなったので、jQuery側で最適化してくれてとなると助かりますね。
レスありがとうございました。
Posted by u1tnk at 2009年02月09日
>u1tnkさん
イベントの取得を無理やり取得するのに、
さらに内容が膨れ上がる…なんてことなのでしょうね。
このlive()を使うことでかなり楽になることも増えるのでしょう!
使える関数がまだ限られているみたいですし、
他の関数とちょっとだけ使い方が違うのもこの関数をより使いやすくするための工夫なんでしょうね。

コメントありがとうございます!
Posted by ハム at 2009年02月10日
Posted by u1tnk
> DOM操作イベントを監視してるでしょうから
Posted by ハム
> 今回追加のliveなどのパフォーマンスはかなりいいような英文がどこかにあったような…

私もいますぐにソース提示できないので、証拠は各位でお確かめ頂きたいのですが、live の実装は、"イベントバブリング" だと読んだ覚えがあります。
ので、各要素ひとつひとつにイベントハンドラを登録しないため、消費メモリ量が抑えられイベントハンドラ登録処理に時間を取られることもなくなるのでそういう面でのパフォーマンスアップが図れる、ということだと理解しています。

Posted by ハム
> 使える関数がまだ限られているみたいですし

関数...イベントでしょうかね。
live で補足できるイベントが一部のイベントに限られているのは、その実装上、バブリングしないイベントは上位要素で補足できないからだと私は理解しています。
Posted by developer@adjust at 2009年04月10日
>developer@adjustさん
コメントありがとうございます。
個人的にもliveはまだまだ勉強中なので、なにか良い実装事例などがありましたら、是非ご教授いただけたら嬉しいです!
Posted by ハム at 2009年04月11日
> なにか良い実装事例などがありましたら

そうですね、良い実装事例かどうかはわかりませんが、例を挙げますと。

当方、ASP.NET Webアプリをよく書くのですが、その際に、UpdatePanel などを使った、AJAX による部分レンダリング(部分更新)などを行っていた場合、まさに DOM 要素が動的に変化するので、こういうケースでの live は大変効果がありました。

開発言語によらず、AJAX 技法を活用して、部分更新を行っているようなケースでは、live が便利なのかも、と思います。

また、パフォーマンスについては、ASP.NET の場合だと、AJAX Control Toolkit という JavaScript を活用したUI関連のライブラリがあるのですが、1ページ中にこれを多用すると、IE6,IE7だとページが表示されてから AJAX Control Toolkit の初期化にずいぶんと時間がかかって数秒間フリーズしたような状態になります。最近のブラウザだと JavaScript の処理が速いので対して問題になりませんが、こういうケースでも jQuery の live をうまく活用できれば状況改善されそう、と感じております。
Posted by developer@adjust at 2009年04月13日
>developer@adjustさん
Webアプリなど、DOMが動的に変化するようなページだと、liveのような動作を軽くするスクリプトは重要になってくるのですね。
今後はWebアプリにかかわらず、さまざまなところで多用される可能性も十分でてきているので、ライブラリを使う場合、今後は読み込み時間とか、そういう面でも気にしていかなければならないですね。
今後はliveもそうですが、いろいろ学ばなければならないなーと、まだまだ感じております。
Posted by ハム at 2009年04月14日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

[TODAY's TOPIC] January 29, 2009
Excerpt: [CSS]フロートしたナビゲーションを中央に配置するスタイルシート 【英語】「グーグル・ジャパンで働く11人の英語勉強法」 ネットブックで動く軽量Linuxデ...
Weblog: Movable Type 備忘録
Tracked: 2009-01-29 00:46

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。