jQuery API の event.currentTarget は、イベントバブリングフェーズ内の現在のDOM要素を表すプロパティ。
実装例（サンプル）
#jquery-api-event-click-1
#jquery-api-event-click-2
#jquery-api-event-click-3
event.currentTarget:
実装例（サンプル）の動作について
緑色のボックスをクリックすると、「event.currentTarget: 」の右横に、「#jquery-api-event-click-1」と表示し、「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 」と表示する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '.jquery-api-event-click' ) . click( function( event ) {
var currentTargetId = event . currentTarget . id;
var targetId = event . target . id;
jQuery( '#jquery-api-event-currentTarget-id' ) . text( currentTargetId );
jQuery( '#jquery-api-event-target-id' ) . text( targetId );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.jquery-api-event-click' ) . click( function( event ) {
var currentTargetId = event . currentTarget . id;
var targetId = event . target . id;
jQuery( '#jquery-api-event-currentTarget-id' ) . text( currentTargetId );
jQuery( '#jquery-api-event-target-id' ) . text( targetId );
} );
} );
// -->
</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>
<!--
.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.currentTarget: <span id="jquery-api-event-currentTarget-id"></span></p>
<p>event.target: <span id="jquery-api-event-target-id"></span></p>
#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.currentTarget: <span id="jquery-api-event-currentTarget-id"></span></p>
<p>event.target: <span id="jquery-api-event-target-id"></span></p>