ywork2020.com

Title

1回だけ実行されるハンドラーをイベントにアタッチする

目次 (INDEX)

oneとは

ここで説明する one とは次の語句からなるjQueryのメソッドです。
one
読み: ワン
意味: 1、一つ、1個、一人

目次に戻る

oneメソッドの概要

このメソッドは、呼び出し元のセレクターにマッチした要素に 一回だけ実行される 任意のイベントをバインドし、ハンドラーをアタッチします。

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

目次に戻る

構文

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

  • Events : イベント文字、またはイベントオブジェクトを指定します。
  • FilterSelector : 呼び出し元の子孫を抽出するためのフィルターをセレクター文字で指定します。
  • EventData : eventObject.data 経由で渡されるデータを指定します。詳細は click() のページにサンプルを用意しています。
$(Selector).one(Events [, EventData ], Handler);
$(Selector).one(Events [, FilterSelector ] [, EventData ], Handler);
$(Selector).one(Events [, FilterSelector ] [, EventData ]);

目次に戻る

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

ここでは、ボタン要素のクリックイベントに1回だけ実行されるハンドラーをアタッチしています。

ハンドラーにはアラートダイアログを開く仕様の関数を指定しています。

サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 05: button (ボタン要素です。この要素のクリックイベントに one() を使って、1回だけ実行されるハンドラーをアタッチします。)
サンプルコード: script
<script>
	$("#idButton").one("click", function(){
		window.alert("ボタンがクリックされました。\rこのハンドラーは1回しか実行されません。");
	});
</script>
  • 02-04: $("#idButton").one("click", function(){処理} (クリックイベントに1回だけ実行されるハンドラーをアタッチします。処理はアラートダイアログを開きます。
実行結果:

このボタンにアタッチされたハンドラーは 1回実行すると削除されます。 動作検証は、1回目にボタンをクリックした動作と2回目にボタンをクリックした動作の違いを確認してください。 2回目はハンドラーは機能しないはずです。

目次に戻る