jQueryでウィンドウサイズによって処理を変える

JavaScript

jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

bindとliveの違いがちょっとわかりずらかったのでまとめてみました。bindもliveも基本的な記述の仕方は同じなので、使い方を覚えれば色々応用できそうな感じですね。といってもまだそこまでの知識や技術がさっぱりなので大分時間がかかりそうですけど。

[ads_center]

bindメソッドの使い方

bindメソッドを使えば色んなイベントを対応させることができます。なので普通のイベント処理をbindを使って書くこともできます。

bindを使わない場合のやり方

まずはbindを使わずに普通にclickイベントの処理を書いてみます。

JavaScript

$(function(){
     $('#sample').click(function(){
          $('p').text('サンプルテキスト');
     });
});

HTML

<div id="sample"><p></p></div>

div#sampleをクリックするとサンプルテキストがp内に挿入されます。これを同じやり方でclickをbindに対応させるとこんな感じに記述できます。

bindを使うやり方

JavaScript

$(function(){
     $('#sample').bind('click', function(){
          $('p').text('サンプルテキスト');
     });
});

HTML

<div id="sample"><p></p></div>

このように各イベントを対応させることができます。また、bindはイベントオブジェクトも取得できます。

JavaScript

$(function(){
     $('#sample').bind('click', function(e){
          $('p').text('X座標: ' + e.pageX + ' / Y座標: ' + e.pageY);
     });
});

HTML

<div id="sample"><p></p></div>

CSS

#sample {
     width: 500px;
     height: 500px;
     background: #ccc;
}

div#sample内をクリックするとそのXY座標を表示させる処理です。

liveメソッドの使い方

liveメソッドは、あとから追加される要素にもイベント処理を設定することができます。bindは最初からある要素しかイベント処理を設定されないのですが、liveを使えば新しく追加された要素にも設定できます。

liveを使わないやり方

まずはliveメソッドを使わないで試してみます。下記はp.sampleをクリックするとdiv#wrap内の最後にp.classと同じ要素が追加されます。

JavaScript

$(function(){
     $('.sample').click(function(){
          $('<p class="sample">サンプル</p>').appendTo('#wrap');
     });
});

HTML

<div id="wrap">
    <p class="sample">サンプル</p>
</div>

上記の場合、最初のp.sampleをクリックすると新しく追加されますが、新しく追加されたp.sampleはクリックしても追加されません。これにliveを使えば新しく追加された要素にもイベント処理を適用させることができるようになります。

liveを使ったやり方

$(function(){
     $('.sample').live(
          'click',
          function(){
               $('<p class="sample">サンプル</p>').appendTo('#wrap');
          }
     )
});

これで、新しく追加された要素をクリックすればさらにまた新しい要素が追加されていきます。

まとめ

どちらも基本的な構文が同じなので、あとは使う状況に応じてちゃんと使い分けていければいいかなと思います。あ、でも1.7から.on()と.off()っていうイベント設定ができるようになったみたいですね。

これから覚えるならこっちの方がよかったかもしれないっすね。あとで試してみようかと思います。

VMware Fusion 4でWindows7をインストールしてみた前のページ

創造力を掻き立ててくれるテキストエディタ「OmmWriter Dāna II」を使えば集中して文章が書ける次のページOmmWriter

関連記事

  1. jQuery_Overlay_Menu
  2. JavaScript

    サイドからスライド開閉するレスポンシブメニューのjQueryプラグイン「Material Menu」…

    Material Menuはサイドからスライド開閉するレスポンシブ対応…

  3. plainModal

    JavaScript

    カスタマイズ性が高いシンプルなモーダルウィンドウのjQueryプラグイン「plainModal」

    plainModalはシンプルでカスタマイズ性が高いモーダルウィンドウ…

  4. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  5. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

  6. DropDownMenu

    JavaScript

    レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」

    DropDownMenuは、レスポンシブに対応した多階層なドロップダウ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP