jQuery API の event.data は、イベント時にイベントハンドラに引き渡されたイベントデータが格納されているプロパティ。
イベントデータを引き渡すメソッド
イベントデータを引き渡すメソッドの例。
- on( events, selector, data, fn )
- on( events, selector, data )
- bind( eventType, eventData, fn )
- live( eventType, eventData, fn )
- one( eventType, eventData, fn )
記述例
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>