jQuery API の event.relatedTarget は、イベントに関連するDOM要素がある場合、そのDOM要素を表すプロパティ。
実装例（サンプル）
#jquery-api-event-1
#jquery-api-event-2
#jquery-api-event-3
- 「mouseover」イベントの場合
- event.relatedTarget:
- event.target:
- event.currentTarget:
- 「mouseout」イベントの場合
- event.relatedTarget:
- event.target:
- event.currentTarget:
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '.jquery-api-event' ) . mouseover( function( event ) {
var relatedTargetId = event . relatedTarget . id;
var targetId = event . target . id;
var currentTargetId = event . currentTarget . id;
jQuery( '#jquery-api-mouseover-relatedTarget-id' ) . text( relatedTargetId );
jQuery( '#jquery-api-mouseover-target-id' ) . text( targetId );
jQuery( '#jquery-api-mouseover-currentTarget-id' ) . text( currentTargetId );
} );
jQuery( '.jquery-api-event' ) . mouseout( function( event ) {
var relatedTargetId = event . relatedTarget . id;
var targetId = event . target . id;
var currentTargetId = event . currentTarget . id;
jQuery( '#jquery-api-mouseout-relatedTarget-id' ) . text( relatedTargetId );
jQuery( '#jquery-api-mouseout-target-id' ) . text( targetId );
jQuery( '#jquery-api-mouseout-currentTarget-id' ) . text( currentTargetId );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.jquery-api-event' ) . mouseover( function( event ) {
var relatedTargetId = event . relatedTarget . id;
var targetId = event . target . id;
var currentTargetId = event . currentTarget . id;
jQuery( '#jquery-api-mouseover-relatedTarget-id' ) . text( relatedTargetId );
jQuery( '#jquery-api-mouseover-target-id' ) . text( targetId );
jQuery( '#jquery-api-mouseover-currentTarget-id' ) . text( currentTargetId );
} );
jQuery( '.jquery-api-event' ) . mouseout( function( event ) {
var relatedTargetId = event . relatedTarget . id;
var targetId = event . target . id;
var currentTargetId = event . currentTarget . id;
jQuery( '#jquery-api-mouseout-relatedTarget-id' ) . text( relatedTargetId );
jQuery( '#jquery-api-mouseout-target-id' ) . text( targetId );
jQuery( '#jquery-api-mouseout-currentTarget-id' ) . text( currentTargetId );
} );
} );
// -->
</script>
CSS
<style>
<!--
.jquery-api-event {
margin: 20px;
padding: 20px;
border-radius: 10px;
color: white;
}
#jquery-api-event-1 {
background-color: green;
}
#jquery-api-event-2 {
background-color: blue;
}
#jquery-api-event-3 {
background-color: red;
}
-->
</style>
<!--
.jquery-api-event {
margin: 20px;
padding: 20px;
border-radius: 10px;
color: white;
}
#jquery-api-event-1 {
background-color: green;
}
#jquery-api-event-2 {
background-color: blue;
}
#jquery-api-event-3 {
background-color: red;
}
-->
</style>
HTML
<div id="jquery-api-event-1" class="jquery-api-event">
#jquery-api-event-1
<div id="jquery-api-event-2" class="jquery-api-event">
#jquery-api-event-2
<div id="jquery-api-event-3" class="jquery-api-event">
#jquery-api-event-3
</div>
</div>
</div>
<dl>
<dt>「mouseover」イベントの場合</dt>
<dd>event.relatedTarget: <span id="jquery-api-mouseover-relatedTarget-id"></span></dd>
<dd>event.target: <span id="jquery-api-mouseover-target-id"></span></dd>
<dd>event.currentTarget: <span id="jquery-api-mouseover-currentTarget-id"></span></dd>
<dt>「mouseout」イベントの場合</dt>
<dd>event.relatedTarget: <span id="jquery-api-mouseout-relatedTarget-id"></span></dd>
<dd>event.target: <span id="jquery-api-mouseout-target-id"></span></dd>
<dd>event.currentTarget: <span id="jquery-api-mouseout-currentTarget-id"></span></dd>
</dl>
#jquery-api-event-1
<div id="jquery-api-event-2" class="jquery-api-event">
#jquery-api-event-2
<div id="jquery-api-event-3" class="jquery-api-event">
#jquery-api-event-3
</div>
</div>
</div>
<dl>
<dt>「mouseover」イベントの場合</dt>
<dd>event.relatedTarget: <span id="jquery-api-mouseover-relatedTarget-id"></span></dd>
<dd>event.target: <span id="jquery-api-mouseover-target-id"></span></dd>
<dd>event.currentTarget: <span id="jquery-api-mouseover-currentTarget-id"></span></dd>
<dt>「mouseout」イベントの場合</dt>
<dd>event.relatedTarget: <span id="jquery-api-mouseout-relatedTarget-id"></span></dd>
<dd>event.target: <span id="jquery-api-mouseout-target-id"></span></dd>
<dd>event.currentTarget: <span id="jquery-api-mouseout-currentTarget-id"></span></dd>
</dl>