jQuery.unbind()関数の使い方と注意点を詳しく解説

unbind() 関数は、一致する要素にバインドされた 1 つ以上のイベントの イベント処理 関数を削除するために使用されます。

unbind() 関数は、主に、bind() 関数によってバインドされたイベント処理関数のバインドを解除するために使用されます。

この関数はjQueryオブジェクト(インスタンス)に属します。

構文

unbind() 関数には、主に次の 2 つの使用形式があります:

使用方法 1:

jQueryObject.unbind( [ events [, handler ]] )

現在一致する要素のイベント イベント バインディングを削除する Event関数ハンドラーを処理します。

使用法 2:

jQueryObject.unbind(eventObject )

は、指定されたイベント処理関数によって渡される Event オブジェクトであり、対応するイベント処理関数を削除するために使用されます。

パラメータ

パラメータの説明

events Optional/Stringtype スペースで区切られた 1 つ以上のイベント タイプと、オプションの namespace (「click」、「focus click」、「keydown.myPlugin」など)。

handler 関数タイプで指定されたオプション/イベント ハンドラー関数。

eventObject Object class は、オブジェクトに渡されたイベント ハンドラー関数を削除するために使用される Event オブジェクトです。

jQuery 1.4.3 は、false を指定できるパラメーター ハンドラーを新たにサポートしました。イベント ハンドラー関数は、ハンドラー パラメーターが false の場合にバインドされたイベントを削除するために使用されます。

パラメータハンドラが省略された場合、要素に一致する指定されたタイプのイベントにバインドされているすべてのイベントハンドラが削除されます。

すべてのパラメータが省略された場合は、任意の要素にバインドされている任意のイベント タイプに対して、一致する要素のイベント ハンドラーを削除することを意味します。

戻り値

unbind()関数の戻り値はjQuery型で、現在のjQueryオブジェクトそのものを返します。

実際、unbind()関数のパラメータはすべてフィルタリング条件であり、すべてのパラメータ条件に一致するイベント処理関数のみが削除されます。パラメータが多いほど、より多くの条件が存在し、削除される範囲は小さくなります。

例と説明

次の初期 HTML コードを参照してください:

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>

まず、イベントを上記のボタンと 要素にバインドし、次に unbind() 関数を使用してイベントのバインドを解除します。コードは次のとおりです。

function btnClick1(){
    alert( this.value + "-1" );
}
function btnClick2(){
    alert( this.value + "-2" );
}
var $buttons = $(":button");
// 为所有button元素的click事件绑定事件处理函数btnClick1
$buttons.bind( "click", btnClick1 );
// 为所有button元素的click事件绑定事件处理函数btnClick2
$buttons.bind( "click", btnClick2 );
// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("a").bind( "click mouseover mouseleave", function(event){
    if( event.type == "click" ){
        alert("点击事件");
    }else if( event.type == "mouseover" ){
        $(this).css("color", "red");
    }else{
        $(this).css("color", "blue");       
    }
});
// 移除为所有button元素的click事件绑定的事件处理函数btnClick2
// 点击按钮，只执行btnClick1
$buttons.unbind("click", btnClick2);
// 移除为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)
// 点击按钮，不会执行任何事件处理函数
// $buttons.unbind("click");
// 只移除为btn1元素的click事件绑定的所有事件处理函数
 // btn2元素的click事件仍然有效
// $("#btn1").unbind("click");
// 移除为所有a元素的任何事件绑定的所有处理函数
// 点击链接，或用鼠标在链接上移入、移出，都不会触发执行任何事件处理函数
// $("a").unbind( );

unbind() 関数は、渡されたイベント オブジェクトに基づいて関数を削除することもできます。次の jQuery コードでは、[クリック 1] ボタンが初めてクリックされたときのみプロンプト ボックスがポップアップ表示され、その後クリック イベントがすぐに削除されます。