jQuery API の event.type は、発生したイベントの種類（イベントタイプ）を表すプロパティ。クリックイベントであれば「click」となり、マウスオーバーイベントであれば「mouseover」となる。
実装例（サンプル）
click
dblclick
mouseover
mouseout
event.type:
実装例（サンプル）の動作について
- 「click」をクリックすると、「event.type: 」の右側に、「click」と表示。
- 「dblclick」をダブルクリックすると、「event.type: 」の右側に、「dblclick」と表示。
- 「mouseover」にカーソルを合わせると、「event.type: 」の右側に、「mouseover」と表示。
- 「mouseout」からカーソルを外すと、「event.type: 」の右側に、「mouseout」と表示。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-event-click' ) . click( function( event ) {
jQuery( '#jquery-api-event-type' ) . text( event . type );
} );
jQuery( '#jquery-api-event-dblclick' ) . dblclick( function( event ) {
jQuery( '#jquery-api-event-type' ) . text( event . type );
} );
jQuery( '#jquery-api-event-mouseover' ) . mouseover( function( event ) {
jQuery( '#jquery-api-event-type' ) . text( event . type );
} );
jQuery( '#jquery-api-event-mouseout' ) . mouseout( function( event ) {
jQuery( '#jquery-api-event-type' ) . text( event . type );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-event-click' ) . click( function( event ) {
jQuery( '#jquery-api-event-type' ) . text( event . type );
} );
jQuery( '#jquery-api-event-dblclick' ) . dblclick( function( event ) {
jQuery( '#jquery-api-event-type' ) . text( event . type );
} );
jQuery( '#jquery-api-event-mouseover' ) . mouseover( function( event ) {
jQuery( '#jquery-api-event-type' ) . text( event . type );
} );
jQuery( '#jquery-api-event-mouseout' ) . mouseout( function( event ) {
jQuery( '#jquery-api-event-type' ) . text( event . type );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-events p {
margin: 5px;
padding: 5px 0px;
width: 120px;
text-align: center;
background-color: yellow;
float: left;
cursor: pointer;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-api-events p {
margin: 5px;
padding: 5px 0px;
width: 120px;
text-align: center;
background-color: yellow;
float: left;
cursor: pointer;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-api-events">
<p id="jquery-api-event-click">click</p>
<p id="jquery-api-event-dblclick">dblclick</p>
<p id="jquery-api-event-mouseover">mouseover</p>
<p id="jquery-api-event-mouseout">mouseout</p>
<div style="clear:left;"></div>
</div>
<p>event.type: <span id="jquery-api-event-type"></span></p>
<p id="jquery-api-event-click">click</p>
<p id="jquery-api-event-dblclick">dblclick</p>
<p id="jquery-api-event-mouseover">mouseover</p>
<p id="jquery-api-event-mouseout">mouseout</p>
<div style="clear:left;"></div>
</div>
<p>event.type: <span id="jquery-api-event-type"></span></p>