ywork2020.com

Title

呼び出し元要素の子要素にイベントを登録する

目次 (INDEX)

delegateとは

ここで説明する delegate とは次の語句からなるjQueryのメソッドです。
delegate
読み: デリゲート
意味: 代表

目次に戻る

delegateメソッドの概要

このメソッドは、各種イベントにハンドラーをバインドするための 補助 を行います。

補助 といっているのは jQオブジェクト (呼び出し元セレクター) の子要素を対象範囲とするハンドラーのバインドができることです。 また、このメソッドは対象範囲を絞り込むので、他のバインド系メソッドよりも処理速度の向上が見込まれます。

このメソッドに類似したメソッドとして、 on() がありますが、on は 将来追加要素 (プログラムによって後で追加される要素) も対象としますが、delegate() は 将来追加要素 を対象としませんので、状況によって使い分けてください。

目次に戻る

構文

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

$(Selector).delegate(selector, eventType, handler)

目次に戻る

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

ここでは、2つのdiv要素を親とし、各親に子要素の b と span を配置しています。

delegate() の呼び出し元には "#idDiv2" をセレクターに指定していますので、そこに焦点を当ててサンプルを見て下さい。 "#idDiv1" の子要素にはハンドラーがバインドされていないことが分かるはずです。

サンプルコード: CSS
<style>
	#idDiv1, #idDiv2{
		border: thin solid ##lightgray;
		margin: 0.5em 0;
		padding: 2em 1em;
	}
	#idDiv1 span, #idDiv2 span{
		border: thin solid ##black;
		padding: 1em;
	}
</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="idDiv1">
		<b>B-1</b>
		< span>SPAN-1< /span>
		<b>B-1</b>
	</div>
	<div id="idDiv2">
		<b>B-2</b>
		< span>SPAN-2< /span>
		<b>B-2</b>
	</div>
	<script>...</script>
</body>
  • 06-10, 11-15: div (ここでは親要素となります。id値をつけて 2つの要素を識別できるようにしています。)
  • 07, 09, 12, 14: b (子要素となる b要素です。)
  • 08, 13: span (子要素となる span要素です。)
サンプルコード: script
<script>
	$("#idDiv2").delegate("b", "mouseenter", function(){
		$(this).css("background-color", "##lightblue");
	});
	$("#idDiv2").delegate("b", "mouseleave", function(){
		$(this).css("background-color", "transparent");
	});
</script>
  • 02-04: $("#idDiv2").delegate() (delegate の引数に(b要素, マウスエンター, 関数)を指定して処理をバインドしています。)
  • 03: $(this).css() (ここでの this は b要素のことになります。cssメソッドで背景色をライトブルーに設定しています。)
  • 05-07: $("#idDiv2").delegate() (delegate の引数に(b要素, マウスリーブ, 関数)を指定して処理をバインドしています。)
  • 06: $(this).css() (ここでの this は b要素のことになります。cssメソッドで背景色をトランスペアレントに設定しています。)
実行結果:
B-1SPAN-1B-1
B-2SPAN-2B-2

動作検証をするにはマウスポインターを各要素の上に乗せてみてください。 [ B-2 ] の要素にだけ、マウスイベントにハンドラーがバインドされているのが分かると思います。

目次に戻る