ywork2020.com

Title

イベントに関連付けされたハンドラーを解除する

目次 (INDEX)

offとは

ここで説明する off とは次の語句からなるjQueryのメソッドです。
off
読み: オフ
意味: 離れる、逸れる、外れる、休む

目次に戻る

offメソッドの概要

このメソッドは、 on() 、 または、他のバインド系メソッドでアタッチされた、任意のイベントハンドラを削除します。

このメソッドの引数を指定しない場合は、呼び出し元の要素にアタッチされている全てのハンドラーが削除されます。

目次に戻る

構文

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

  • [,selector] はハンドラーのアタッチに使われたセレクターと一致する必要があります。
$(Selector).off();
$(Selector).off(event);
$(Selector).off(events [,selector]);
$(Selector).off(events [,selector] [,handler]);

目次に戻る

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

ここでは、3つのボタンを配置しました。  各ボタンには id 値を設定しています。  その機能は以下のようになります。

  • idOn : on() メソッドを使って idClick の要素のクリックイベントに関数をバインドします。
  • idClick : この要素のクリックイベントに関数をバインドしたり、解除したりします。
  • idOff : off() メソッドを使って idClick の要素のクリックイベントからハンドラーを解除します。
サンプルコード: CSS
<style>
	button{
		display: block;
		margin: 5em 1em;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<button id="idOn">On</button>
	<button id="idClick">Click</button>
	<button id="idOff">Off</button>
	<script>...</script>
</body>
  • 06: button (識別子に idOn を持つ要素です。これをクリックすると 07行目の要素のクリックイベントに関数をアタッチします。)
  • 07: button (識別子に idClick を持つ要素です。この要素に on() と off() を使ってイベント関数をアタッチしたり、解除したりします。)
  • 08: button (識別子に idOff を持つ要素です。これをクリックすると 07行目の要素のクリックイベントから関数を解除します。)
サンプルコード: script
<script>
	$("#idOn").click(function(){
		$("#idClick").on("click", function(){
			window.alert("クリックされました");
		});
		$("#idClick").text("Click イベントに関数をバインドしました");
	});
	$("#idOff").click(function(){
		$("#idClick").off();
		$("#idClick").text("Click イベントから関数を解除しました");
	});
</script>
  • 02-07: $("#idOn").click(function(){処理} (idOn の要素の click イベントに 処理 をバインドしています。)
  • 03-05: $("#idClick").on("click", function(){処理} (idClick の要素の click イベントに 処理 をバインドしています。)
  • 04: window.alert() (警告ダイアログを開いて "クリックされました" と表示します。)
  • 06: $("#idClick").text() (idClick の要素のテキストを変更しています。)
  • 08-11: $("#idOff").click(function(){処理} (idOff の要素の click イベントに 処理 をバインドしています。)
  • 010: $("#idClick").text() (idClick の要素のテキストを変更しています。)
実行結果:

目次に戻る