jQuery.off()関数の詳細

off()関数は、要素にバインドされた1つ以上のイベントを除去するイベント処理関数です.off()関数は、主にon()関数によってバインドされたイベント処理関数を解除するために使用される.
この関数はjQueryオブジェクト(インスタンス)に属します.
構文
jQuery 1.7この関数を追加します.主に次の2つの形式の使い方があります.
使用方法1:

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

使用法2:

jQueryObject.off( eventsMap [, selector ] )

パラメータ
パラメータ
説明
events
オプション/stringタイプ「click」、「focus click」、「keydown.myPlugin」など、スペースで区切られた1つ以上のイベントタイプとオプションのネーミングスペース.
eventsMap
ObjectタイプObjectオブジェクトは、各属性がイベントタイプとオプションのネーミングスペース(パラメータevents)、属性値がバインドされたイベント処理関数(パラメータhandler)に対応するObjectオブジェクトです.
selector
オプション/stringタイプjQueryセレクタで、バインドされたイベントをトリガーできる子孫要素を指定します.このパラメータがnullまたは省略されている場合、現在の要素自体がイベントをバインドしていることを示します(実際のトリガは、イベントフローが現在の要素に到達できる限り、子孫要素であってもよい).
handler
オプション/Functionタイプで指定したイベント処理関数.off()関数は、現在の一致要素において子孫要素selectorにバインドされたeventsイベントのイベント処理関数handlerを除去する.
パラメータselectorを省略すると、任意の要素にバインドされたイベント処理関数が除去される.
パラメータselectorは、on()関数によってバインドが追加されたときに入力されるセレクタと一致しなければならない.
パラメータhandlerが省略されている場合、指定された要素によって指定されたイベントタイプにバインドされたすべてのイベント処理関数が除去される.
すべてのパラメータが省略されている場合は、現在の要素にバインドされているイベントタイプのイベント処理関数を削除します.
戻り値off()関数の戻り値はjQueryタイプであり、現在のjQueryオブジェクト自体を返します.
実際、off()関数のパラメータはすべてフィルタ条件であり、すべてのパラメータ条件に一致するイベント処理関数のみが除去される.パラメータが多ければ多いほど、制限条件が多くなり、除去される範囲が小さくなります.
例&説明
次の初期HTMLコードを参照してください.

 id="btn1" type="button" value="  1" />
 id="btn2" type="button" value="  2" />
id="a1" href="#">CodePlayer

まず、上記buttonと要素はイベントをバインドし、off()関数を使用してイベントバインドを解除します。対応するコードは次のとおりです。

function btnClick1(){
    alert( this.value + "-1" );
}

function btnClick2(){
    alert( this.value + "-2" );
}

var $body = $("body");

//    button   click          btnClick1
$body.on("click", ":button", btnClick1 );

//    button   click          btnClick2
$body.on("click", ":button", btnClick2 );

//   a    click、mouseover、mouseleave  
$body.on("click mouseover mouseleave", "a", function(event){
    if( event.type == "click" ){
        alert("    ");
    }else if( event.type == "mouseover" ){
        $(this).css("color", "red");
    }else{
        $(this).css("color", "blue");       
    }
});


//   body     button   click           btnClick2
//     ，btnClick1    
$body.off("click", ":button", btnClick2);


//   body     button   click             (btnClick1 btnClick2)
//     ，            
// $body.off("click", ":button");


//   ： $body.off("click", "#btn1");     btn1     ，off()           on()          。


//   body       (  button   )のclickイベントバインドのすべての    
//        ，               
// $("body").off("click");


//   body                     
//     ，           /    ，               
// $("body").off( );

実行コード(他のコードはプレゼンテーションページにコピーして実行してください)
さらに、off()関数は、指定されたネーミングスペースのイベントバインドのみを除去することもできる.

var $btn1 = $("#btn1");

$btn1.on("click.foo.bar", function(event){
    alert("click-1");
});
$btn1.on("click.test", function(event){
    alert("click-2");
});
$btn1.on("click.test.foo", function(event){
    alert("click-3");
});

$btn1.off("click.test"); //   click-2、click-3

// $btn1.off("click.foo");  //   click-1、click-3

// $btn1.off("click.foo.bar");  //   click-1

// $btn1.off("click");  //     click      (click-1、click-2、click-3)

// $btn1.off(".foo");  //           foo       ，    click