jQuery: EventObject.delegateTarget (デリゲイトターゲット) の解説

delegateTargetとは

delegate: 読み: デリゲイト
意味: 代表
target: 読み: ターゲット
意味: 的、標的、目的となるもの

目次に戻る

delegateTargetプロパティの概要

この EventObject プロパティは、イベント登録時に登録メソッドを呼び出した、呼び出し元の要素をオブジェクトとして取得します。

delegateTarget はオブジェクト型ですので、delegateTarget の後に (.) ドット演算子で繋いで id などのプロパティを取得することが可能です。また、ドット演算子で繋いでメソッドを利用することも可能です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) のイベントオブジェクトを参照しています。

$(Selector).EventMethod(function(eo){
	var objEventDelegateTarget = eo.delegateTarget;
});

目次に戻る

サンプルコードと実行結果

ここでは、div の子要素に on() メソッドを使って click イベントに関数をアタッチしておき、イベントメソッドを実行した時に生成されるイベントオブジェクトの delegateTarget プロパティの値を取得して表示してみます。

ここでの on() を構文的に書くと以下のようになります。これは、あまり使用頻度が高い書き方ではないかもしれませんが、親要素や先祖要素に処理上の狙いがある場合には、このような方法は有効です。

$(Selector).on(Events , FilterSelector , Handler(EventObject){processing})

上記の書き方だと、イベントがバインドされるのは FilterSelector で特定した要素になります。イベントをバインドするだけなら、下記のような書き方でも実現できますが、下記の方法では delegateTarget は currentTarget と同じオブジェクトを取得します。しかし、上記のように呼び出し元セレクターと on() の引数セレクターを組み合わせてコードを書くことで、親や先祖要素もオブジェクトとして取得できるわけです。

補足的、かつ単純に言うと delegateTarget プロパティから取得できるオブジェクトは上記コードの $(Selector) の部分ことです。

$(ancestors children).on(Events , Handler(EventObject){processing})
和訳	$(先祖 子孫).on(イベント , ハンドラー(イベントオブジェクト){処理})

サンプルコード: CSS

<style>
	#idDivParent, #idDivRed, #idDivYellow, #idDivBlue{
		margin: 2em;
		padding: 1em;
	}
	#idDivParent{
		background-color: ##gray;
	}
	#idDivRed{
		background-color: ##red;
	}
	#idDivYellow{
		background-color: ##yellow;
	}
	#idDivBlue{
		background-color: ##blue;
	}
</style>

サンプルコード: HTML

<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="idDivParent">
		<div id="idDivRed"></div>
		<div id="idDivYellow"></div>
		<div id="idDivBlue"></div>
	</div>
	<script>...</script>
</body>

06-10: div id="idDivParent" (id 属性値に idDivParent を持つ要素です。ここでは親要素となります。)
07: div id="idDivRed" (id 属性値に idDivRed を持つ要素です。ここでは背景色が赤色の子要素となります。)
08: div id="idDivYellow" (id 属性値に idDivYellow を持つ要素です。ここでは背景色が黄色の子要素となります。)
09: div id="idDivBlue" (id 属性値に idDivBlue を持つ要素です。ここでは背景色が青色の子要素となります。)

サンプルコード: script

<script>
	$("#idDivParent").on("click", "#idDivRed", function(eo){
		window.alert(eo.delegateTarget.id);
	});
	$("#idDivParent").on("click", "#idDivYellow", function(eo){
		window.alert(eo.delegateTarget.id);
	});
	$("#idDivParent").on("click", "#idDivBlue", function(eo){
		window.alert(eo.delegateTarget.id);
	});
</script>

02-04: $("#idDivParent").on("click", "#idDivRed", function(eo){処理}) ( $("#idDivParent") の部分が on メソッドの呼び出し元になります。 on メソッドの引数には、フィルターとして "#idDivRed" を設定しています。この場合、 #idDivParent の子孫要素の中から #idDivRed の要素を特定して関数をアタッチしています。簡単に言うと delegateTarget とはイベント登録の際に利用した呼び出し元セレクターの要素のことです。また、このイベントが発生する要素は currentTarget プロパティから取得します。 )
03: eo.delegateTarget (イベントオブジェクトの delegateTarget プロパティの値を取得しています。この 03 行目の eo は 02 行目の function(eo) を参照しています。　また、これと同じように 06 は 05 を参照、 09 は 08を参照しています。)
05-10: は前記したコードと類似していますので説明は省略します。

実行結果:
灰色赤色黄色青色赤色、黄色、青色の div 要素をクリックすると灰色の要素 (親要素) の id 値を取得してダイアログに表示します。

目次に戻る

Title

イベント登録時の呼び出し元要素を取得する

目次 (INDEX)

delegateTargetとは

delegateTargetプロパティの概要

構文

サンプルコードと実行結果