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()っていうイベント設定ができるようになったみたいですね。

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

関連記事

  1. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

  2. jquery.datepicker

    JavaScript

    未来的なデータピッカーを実装できる「jquery.datepicker」

    jquery.datepickerはWeb用の未来的なデータピッカーを…

  3. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  4. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  5. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP