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. slimMenu
  2. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

  3. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  4. no-image

    JavaScript

    シンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」

    jquery-tabはシンプルなタブパネルを実装することができるjQu…

  5. jQuery.GI.TheWall.js
  6. Valiant 360

    JavaScript

    360度のパノラマ動画を実装できるビデオプレーヤー「Valiant 360」

    Valiant 360はブラウザ上で360度のパノラマ動画・写真を実装…

コメント

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

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

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP