ywork2020.com

Title

既存要素と将来追加要素にイベントを登録する

目次 (INDEX)

onとは

ここで説明するon とは次の語句からなるjQueryのメソッドです。
on
読み: オン
意味: ~に、~にくっつけて、~の身に着けて

目次に戻る

onメソッドの概要

このメソッドは、呼び出し元のセレクターにマッチした要素の任意のイベントにハンドラーをバインドします。

イベントの登録処理は既存の要素だけでなく、将来的に追加される要素もバインドの対象となります。

目次に戻る

構文

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

$(Selector).on(Events [, Selector] [, Data], Handler(EventObject))

目次に戻る

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

ここからはonメソッドの構文に任意の値を当てはめた使用例を紹介していこうと思います。

構文の使用例: on(events [, selector] [, data], handler(eventObject))

この構文の引数にはeventsとhandlerを与える必要があり、selectorとdataはオプションとなります。 なお、dataはオブジェクト型で記述したマップ値となります。

ここではonメソッドの引数に「events=クリックイベント」と「handler=任意で作成した関数」を指定しています。 つまり、クリックされると関数が実行されるというシンプルな構成です。 また、オプションのセレクターとデータの扱いについても同時にサンプルコードに含んでいます。

セレクターについては初めにjQオブジェクトとして"#idParent"を指定しておき、onメソッドの引数として"b"要素を指定しています。 この場合、"#idParent"に対してclickイベントがバインドされることになります。

また、onメソッドとの比較をするためにclickメソッドを使用して同じ条件で"#idParent"内のu要素にclickイベントをバインドしてみました。 それでは、実際のサンプルに触れていただいてから、細かな違いについて説明しようと思います。

サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<div id="idParent">
		<b>B Element</b><br>
		<u>U Element</u><br>
		<button>new B & new U 要素の追加</button><br>
	</div>
</body>
  • 05: div要素 (idParentは親要素です。)
  • 06: b要素 (子要素です。onメソッドでclickイベントをバインドしています。)
  • 07: u要素 (子要素です。clickメソッドでclickイベントをバインドしています。)
  • 08: button要素 (子要素です。クリックすると新しいb要素とu要素が追加されます。)
サンプルコード: script
<script>
	$("#idParent").on("click", "b", {msg : "Message: My "}, function(event){
		window.alert(event.data.msg + $(this).text());
	});
	$("#idParent u").click({msg : "Message: My "}, function(event){
		window.alert(event.data.msg + $(this).text());
	});
	$("#idParent button").on("click",function(){
		$("<b>new B Element</b><br><u>new U Element</u><br>").appendTo("#idParent").css("color","red");
		$("#idParent button").off();
	});
</script>
  • 02: onメソッド ("#idParent"経由でb要素にclickイベントをバインドします。)
  • 05: clickメソッド ("#idParent"の子u要素にclickイベントをバインドします。)
  • 08-11: 新要素の追加処理 (ここでもonメソッドを使用していますが、説明としては重要な部分ではありません。)
実行結果:
B Element
U Element

テスト手順:
  1. [B Element] をクリックするとダイアログが開きます。OKで閉じてください。
  2. [U Element] をクリックするとダイアログが開きます。OKで閉じてください。
  3. 要素の追加ボタンをクリックすると新要素の[new B Element]と[new U Element]が追加されます。
  4. [new B Element]をクリックするとダイアログが開きます。OKで閉じてください。
  5. [new U Element] をクリックするとダイアログは開きません。

以上の手順の実行結果からも分るようにonメソッドでイベントをバインドした場合は、 後から追加された要素に対してもセレクターがマッチしていれば、同じようにイベントがバインドされます。 一方、clickメソッドでイベントをバインドした場合、後で追加された要素にはイベントはバインドされません。

目次に戻る

応用: 複数のイベントを同時にバインドする

ここではonメソッドを使って複数のイベントを同時にバインドする方法を取り上げています。

サンプルに使用しているイベントは以下の通りです。

  • mouseover: マウスポインタが要素に進入した時に発生する
  • mouseout: マウスポインタが要素から外れた時に発生する
サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<div id="idParent">
		<em>EM Element</em>
	</div>
</body>
  • 05: div要素 (idParentは親要素です。)
  • 06: em要素 (子要素です。onメソッドで複数のイベントをバインドしています。)
サンプルコード: script
<script>
	$("#idParent em").on({
		mouseover: function(){
			$(this).css({"background-color":"lightblue","border-color":"blue"})
		},
		mouseout: function(){
			$(this).css({"background-color":"lightpink","border-color":"tomato"})
		}
	});
</script>
  • 02: onメソッド ("#idParent"の子em要素に2つのイベントをバインドします。)
  • 03: イベント登録 (mouseoverイベントをバインドします。)
  • 06: イベント登録 (mouseoutイベントをバインドします。)
実行結果:
EM Element

目次に戻る