event.relatedTarget

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>

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>

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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, イベント・オブジェクト パーマリンク