jQuery API の bind( eventType, eventData, fn ) は、１つ目の引数に指定したイベントに、３つ目の引数に指定したイベントハンドラをバインドすることができるメソッド。２つ目の引数に指定したデータを、イベントハンドラに引き渡すことができる。
記述方法
jQuery( セレクター ) . bind(
イベントタイプ,
{
イベントデータ名: イベントデータ
},
イベントハンドラ
);
イベントタイプ,
{
イベントデータ名: イベントデータ
},
イベントハンドラ
);
「セレクター」の要素の、「イベントタイプ」のイベントに、「イベントハンドラ」をバインド。「イベントデータ」を「イベントデータ名」に格納。
イベントデータの呼び出し方
event . data . イベントデータ名
実装例（サンプル）
- リストアイテム1
- リストアイテム2
- リストアイテム3
- リストアイテム4
- リストアイテム5
実装例（サンプル）の動作について
リストアイテムの上にカーソルを合わせると、リストマークの白い丸が、黒い丸に変化する。
リストアイテムの上からカーソルを外すと、リストマークの黒い丸が、元の白い丸に変化する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-bind li' ) . bind(
'mouseover',
{
type: 'disc',
},
function( event ) {
jQuery( this ) . css( 'list-style-type', event . data . type );
}
);
jQuery( '#jquery-api-bind li' ) . bind(
'mouseout',
{
type: 'circle',
},
function( event ) {
jQuery( this ) . css( 'list-style-type', event . data . type );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-bind li' ) . bind(
'mouseover',
{
type: 'disc',
},
function( event ) {
jQuery( this ) . css( 'list-style-type', event . data . type );
}
);
jQuery( '#jquery-api-bind li' ) . bind(
'mouseout',
{
type: 'circle',
},
function( event ) {
jQuery( this ) . css( 'list-style-type', event . data . type );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-bind {
list-style-type: circle;
}
-->
</style>
<!--
#jquery-api-bind {
list-style-type: circle;
}
-->
</style>
HTML
<ul id="jquery-api-bind">
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
<li>リストアイテム4</li>
<li>リストアイテム5</li>
</ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
<li>リストアイテム4</li>
<li>リストアイテム5</li>
</ul>