ywork2020.com

Title

イベントの発生源となる要素を取得する

目次 (INDEX)

targetとは

ここで説明する target とは次の語句からなるjQueryのEventObjectプロパティです。
target
読み: ターゲット
意味: 的、標的、目的となるもの

目次に戻る

targetプロパティの概要

この EventObject プロパティは、イベントが発生したときに、イベントの発生源となった要素をオブジェクトとして取得します。

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

target 経由のプロパティから得られる情報を使えば、その要素の直接のイベント発生なのか、バブリングによって発生したイベントなのかを 特定することができるので条件によって関数の処理を変えるなどの工夫をすることもできます。

目次に戻る

構文

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

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

$(Selector).EventMethod(function(eo){
	var objEventTarget = eo.target;
});

目次に戻る

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

ここでは、button 要素と div 要素の click イベントに関数をアタッチしておき、 要素をクリックした時に生成されるイベントオブジェクトの target プロパティを経由して id の値を取得しています。

サンプルでは、button 要素と div 要素をクリックすることでイベントが発生します。

div 要素をクリックした場合には、div 要素のクリックイベントが発生します。 しかし、button 要素をクリックした場合には、button 要素と div 要素の両方のクリックイベントが発生します。 これはイベントのバブリングという現象です。 バブリングについて分からない方は、「 バブリングとは 」のページを参考にしてください。

サンプルコード: CSS
<style>
	#idDiv{
		background-color: ##lightblue;
		border: thin solid ##gray;
		padding: 3em;
	}
</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="idDiv">
		<button id="idButton">BUTTON</button>
	</div>
	<script>...</script>
</body>
  • 06-08: div (ブロックコンテナー要素です。この要素のクリックイベントからイベントオブジェクトのプロパティの値を取得してアラートダイアログに表示します。)
  • 07: button (ボタンです。この要素のクリックイベントからイベントオブジェクトのプロパティの値を取得してボタンのテキストに表示します。)
サンプルコード: script
<script>
	$("#idDiv").click(function(eo){
		window.alert(eo.target.id);
	});
	$("#idButton").click(function(eo){
		$(this).text(eo.target.id);
	});
</script>
  • 03, 06: eo.target.id (イベントオブジェクトの target プロパティ経由で id を取得しています。 この 03 行目の eo は 02 行目の function(eo) を参照しています。 また、06 行目の eo は 05 行目の function(eo) を参照しています。)
実行結果:

ここでは div 要素の click イベントにしかアラートダイアログを表示する処理を持たせていません。 サンプルコードと実際の動作に注意して確認してみてください。

目次に戻る