bind( events )

jQuery API の bind( events ) は、複数のイベントハンドラを、複数のイベントにバインドしたいときに便利なメソッドだ。

記述方法

jQuery( セレクター ) . bind( {
    イベントタイプ1: function() {
        イベントハンドラ1
    },
    イベントタイプ2: function() {
        イベントハンドラ2
    }
} );

「セレクター」の要素の、「イベントタイプ1」のイベントに、「イベントハンドラ1」をバインド。「セレクター」の要素の、「イベントタイプ2」のイベントに、「イベントハンドラ2」をバインド。

実装例(サンプル)

  • リスト項目1
  • リスト項目2
  • リスト項目3

実装例(サンプル)の動作について

  • リスト項目の上にカーソルを合わせると、背景色が黄色に変わる。
  • リスト項目の上からカーソルを外すと、背景色が白色に変わる。
  • リスト項目をクリックすると、リストマークが黒い丸になる。
  • リスト項目をダブルクリックすると、リストマークが白い丸になる。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '.jquery-api-bind' ) . bind( {
        mouseover: function() {
            jQuery( this ) . css( 'backgroundColor', 'yellow' );
        },
        mouseout: function() {
            jQuery( this ) . css( 'backgroundColor', '#ffffff' );
        },
        click: function() {
            jQuery( this ) . css( 'list-style-type', 'disc' );
        },
        dblclick: function() {
            jQuery( this ) . css( 'list-style-type', 'circle' );
        },
    } );
} );
// -->
</script>

CSS

<style>
<!--
.jquery-api-bind {
    list-style-type: circle;
    cursor: pointer;
}
-->
</style>

HTML

<ul>
    <li class="jquery-api-bind">リスト項目1</li>
    <li class="jquery-api-bind">リスト項目2</li>
    <li class="jquery-api-bind">リスト項目3</li>
</ul>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, イベントハンドラ・アタッチメント パーマリンク