js STUDIO

.off()

要素のイベントハンドラーを削除します。

.off( events [, selector] [, handler(eventObject)] ) 1.7追加

戻り値:jQuery

要素のイベントハンドラーを削除します。

引数 説明
events "click"や"keydown.myPlugin",".myPlugin"などのイベント名、または任意に定義したカスタムイベント名の文字列を指定します。
また、スペース区切りで複数のイベントを指定することも可能です。
[selector] .on()によってイベントをバインドしたセレクタと同じセレクタを指定します。
[handler(eventObject)] バインドさせた関数を指定するか、特別な値falseを指定します。

.off( events-map [, selector] ) 1.7追加

戻り値:jQuery

キーと値の組み合わせでバインドされたイベントハンドラを削除します。

引数 説明
events-map マップ値の組み合わせで、削除するイベントハンドラを指定します。
キーには、"click"や"keydown.myPlugin",".myPlugin"などのイベント名、または任意に定義したカスタムイベント名の文字列を指定します。 また、スペース区切りで複数のイベントを指定することも可能です。
値には、事前にバインドされた関数を指定します。
[, selector] .on()によってイベントをバインドしたセレクタと同じセレクタを指定します。

補足事項

シンプルなアプリケーションであればバインドする際に指定するイベント名は"click"などの 標準的なDOMイベント名を指定しても良いですが、jQueryプラグインの作成、または アプリケーションが大規模で複雑なものである場合、ネームスペースを積極的に使用すべきです。
例えばネームスペースに".myPlugin"と指定してバインドさせておけば、バインドを削除する際にも このネームスペースを使用することで、他のコードからバインドされた処理を誤って削除することを 避ける事ができます。

特定のイベントハンドラを削除するには、selector引数を指定します。 セレクタ文字列はイベントハンドラをバインドさせたものに、正確に一致する必要があります。 委任されていないイベントを除いて、委任された全てのイベントのみを削除するには、特殊な値 "**"を使用します。

イベントハンドラは、引数に関数名を指定することによって削除できます。 jQueryのイベントハンドラをアタッチする場合は、ハンドラ関数に一意のIDを割り当てます。 jQuery.proxy（）または同様のメカニズムを使用して、一意のIDを指定してハンドラを削除しようとすると、意図したものより多くのハンドラが削除されてしまうかもしれません。 このような状況を避けるために、イベントハンドラをバインド、削除する際に名前空間を使用することをおすすめします。

サンプル

全てのP要素から、全てのイベントハンドラを削除します。

$("p").off();

全てのP要素から、clickイベントにバインドされた全てのイベントハンドラを削除します。 

$("p").off( "click", "**" );

第3引数を指定して、特定のバインドされた関数だけを削除します。 

var foo = function () {
  // イベント発生時に実行したい処理…。
};

/*
 BODY内のP要素がクリックされた際に
 foo関数を実行します。
*/
$("body").on("click", "p", foo);

/*
 下記を実行すると、P要素がクリックされても
 foo関数が実行されなくなります。
*/
$("body").off("click", "p", foo);

ネームスペースを指定して、関連付けられたイベントハンドラを削除します。 

var validate = function () {
  // フォーム入力値を検証する処理…。
};

/*
  ".validator"ネームスペースを指定して、
  イベントをバインドします。
*/
$("form").on("click.validator", "button", validate);
$("form").on("keypress.validator", "input[type='text']", validate);

/*
  ".validator" ネームスペースを指定して、
  イベントハンドラを削除します。
*/
$("form").off(".validator");

デモ

黄色いボタンに対して、イベントハンドラの追加・削除を行います。

<!DOCTYPE html>
<html>
<head>
<style>
  button { margin:5px; }
  button#theone { color:red; background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="theone">何もしません...</button>
<button id="bind">clickイベントハンドラ追加</button>
<button id="unbind">clickイベントハンドラ削除</button>
<div style="display:none;">クリックされました!</div>
<script>
function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
  $("body").on("click", "#theone", aClick)
    .find("#theone").text("クリック!");
});
$("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
    .find("#theone").text("何もしません...");
});
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM