event.target

jQuery API の event.target は、イベントを開始したDOM要素を表すプロパティ。

実装例(サンプル)

#jquery-api-event-click-1
#jquery-api-event-click-2
#jquery-api-event-click-3

event.target:

event.currentTarget:

実装例(サンプル)の動作について

緑色のボックスをクリックすると、「event.target: 」の右横に、「#jquery-api-event-click-1」と表示し、「event.currentTarget: 」の右横に、「#jquery-api-event-click-1」と表示。

青色のボックスをクリックすると、「event.target: 」の右横に、「#jquery-api-event-click-2 」と表示し、「event.currentTarget: 」の右横に、「#jquery-api-event-click-1」と表示。

赤色のボックスをクリックすると、「event.target: 」の右横に、「#jquery-api-event-click-3 」と表示し、「event.currentTarget: 」の右横に、「#jquery-api-event-click-1」と表示。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '.jquery-api-event-click' ) . click( function( event ) {
        var targetId = event . target . id;
        var currentTargetId = event . currentTarget . id;
        jQuery( '#jquery-api-event-target-id' ) . text( targetId );
        jQuery( '#jquery-api-event-currentTarget-id' ) . text( currentTargetId );
    } );
} );
// -->
</script>

CSS

<style>
<!--
.jquery-api-event-click {
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    color: white;
}
#jquery-api-event-click-1 {
    background-color: green;
}
#jquery-api-event-click-2 {
    background-color: blue;
}
#jquery-api-event-click-3 {
    background-color: red;
}
-->
</style>

HTML

<div id="jquery-api-event-click-1" class="jquery-api-event-click">
    #jquery-api-event-click-1
    <div id="jquery-api-event-click-2" class="jquery-api-event-click">
        #jquery-api-event-click-2
        <div id="jquery-api-event-click-3" class="jquery-api-event-click">
            #jquery-api-event-click-3
        </div>
    </div>
</div>
<p>event.target: <span id="jquery-api-event-target-id"></span></p>
<p>event.currentTarget: <span id="jquery-api-event-currentTarget-id"></span></p>

スポンサード リンク

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