jQuery API の event . delegateTarget は、on( events, selector, data, fn )メソッドなどでイベントハンドラをバインドした要素の直前にマッチしていた要素を表すプロパティ。
記述方法
event . delegateTarget
記述例
jQuery( セレクター１ ) . on(
イベント,
セレクター２,
function ( event ) {
var delegateTarget = jQuery( event.delegateTarget );
// この例の場合、直前にマッチしていた要素は「セレクター１」。
}
);
イベント,
セレクター２,
function ( event ) {
var delegateTarget = jQuery( event.delegateTarget );
// この例の場合、直前にマッチしていた要素は「セレクター１」。
}
);
実装例（サンプル）
実装例（サンプル）の動作について
各ボタンをクリックすると、DIV要素の背景色を、ボタン名の色に変更する。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#sample' ) . on(
'click',
'button',
function ( $event ) {
var $eventDelegateTarget = jQuery( $event.delegateTarget );
jQuery( $eventDelegateTarget ).css( 'backgroundColor', jQuery( this ).text() );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#sample' ) . on(
'click',
'button',
function ( $event ) {
var $eventDelegateTarget = jQuery( $event.delegateTarget );
jQuery( $eventDelegateTarget ).css( 'backgroundColor', jQuery( this ).text() );
}
);
} );
// -->
</script>
HTML
<div id="sample">
<button>red</button>
<button>blue</button>
<button>green</button>
<button>yellow</button>
<button>white</button>
</div>
<button>red</button>
<button>blue</button>
<button>green</button>
<button>yellow</button>
<button>white</button>
</div>
CSS
<style>
<!--
#sample {
margin: 10px;
padding: 10px;
width: 500px;
height: 100px;
border: solid 1px gray ;
border-radius: 10px;
background-color: white;
}
-->
</style>
<!--
#sample {
margin: 10px;
padding: 10px;
width: 500px;
height: 100px;
border: solid 1px gray ;
border-radius: 10px;
background-color: white;
}
-->
</style>