【jQuery】.off()メソッドでイベントハンドラを削除する

jQueryのoff()メソッドでイベントハンドラを削除

.off()はイベントハンドラを削除するメソッド

.off().on()でアタッチされたイベントハンドラを削除します。

引数無しの場合は全てのイベントハンドラを削除します。

引数にイベント名、名前空間、セレクター、イベントハンドラなどを指定することで、特定のイベントハンドラを削除することができます。

構文は以下の4種類あります。

.off(events [,selector]  [,handler])
.off(events [,selector] )
.off(event)
.off()

それぞれについて説明します。

.off(events [,selector] [,handler])

文字列でイベントを指定して、イベントハンドラを削除します。

events
イベントやオプションの名前空間、もしくはただの名前空間を表す文字列。スペースで区切ることで複数していすることができます。
[,selector]
セレクター。.on()によってイベントハンドラがアタッチされたときに渡されたものと一致するもの。
[,handler]
以前にイベントにアタッチされたイベントハンドラ、またはfalseの値。falseが指定された場合は、常にfalseを返す関数となる。

.off(events [,selector] )

マップ形式のオブジェクトで指定したイベントハンドラを削除します。

events
マップ形式のオブジェクト(キーがイベントまたはオプションの名前空間で、値が以前にアタッチされたイベントハンドラ)。キーとなるイベントはスペースで区切ることで複数指定できます。
[,selector]
セレクター。.on()によってイベントハンドラがアタッチされたときに渡されたものと一致するもの。

.off(event)

jQueryのイベントオブジェクトを指定して、イベントハンドラを削除します。

events
jQueryのイベントオブジェクト(jQuery.Event)。

.off()

引数なしの場合は、全てのイベントハンドラを削除します。

.off()の注意点

'click'などのイベント名が指定されている場合は、そのタイプの全てのイベント(委譲されたものも含む)が削除されます。

プラグインを作成するときや大規模なコードを作成するときは、他のコードにより誤ってイベントハンドラが削除されないように、名前空間を使用してイベントをアタッチしたり削除すると良いでしょう。

'.myPlugin'などの名前空間のみを指定すると、その名前空間の全てのタイプのイベントが削除されます。

委譲された特定のイベントハンドラを削除するにはセレクターを指定します。セレクターはイベントハンドラをアタッチしたときに.on()に渡したものと同じでなければなりません。

委譲されていないイベントは残し、委譲されたイベントだけ削除するには'**'を指定します。

.off()の使い方

.off()の簡単な使い方を紹介します。

次のような2個のボタンが表示されるHTMLを用意します。

<button id="button1">メッセージを表示</button>

<button id="button2">イベントをoff</button>

上記のHTMLにおいて、次のようなJavaScriptを実行します。

<script type="text/javascript">
$('#button1').on('click', function(){
	alert('クリックされました。');
});

$('#button2').on('click', function(){
	$('#button1').off('click');
});
</script>

1個めの「メッセージを表示」というボタンを押すと、押す度にアラートでメッセージが表示されます。

次に2個めの「イベントをoff」というボタンを押してから、「メッセージを表示」を押すとメッセージが表示されません。

2個めのボタンを押すと、1個めのボタン要素にアタッチされたイベントハンドラが.off()により削除されます。その結果、1個めのボタンを押してもメッセージが表示されません。

.off()にマップ形式のオブジェクトを渡す使い方

次に引数にマップ形式のオブジェクトを渡す例を紹介します。

例として、リストとボタンを表示するHTMLを用意します。

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

<button>イベントoff</button>

上記のHTMLにおいて、次のJavaScriptを実行します。

<script type="text/javascript">
var f1 = function(){ $(this).css('color','red'); };
var f2 = function(){ $(this).css('color','black'); };

$('li').on({
	mouseenter: f1,
	mouseleave: f2
});

$('button').on('click', function(){
	$('li').off({
		mouseenter: f1,
		mouseleave: f2
	});
});
</script>

リストの文字の上にマウスポインタが来ると文字が赤色になり、外れると文字が黒色になります。

次にボタンをクリックしてから再びリストの上にマウスポインタを移動しても、文字の色は変化しません。

ボタンをクリックするとリストのmouseentermouseleaveにアタッチされているハンドラが削除されるので、マウスポインタを文字の上に移動しても色が変わらなくなります。

[prism]