ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery.off() 関数の詳細な使用法を理解します。

jQuery.off() 関数の詳細な使用法を理解します。

巴扎黑
巴扎黑オリジナル
2017-06-25 10:42:391865ブラウズ

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

off() 関数は主に、on() 関数によってバインドされているイベント処理関数のブロックを解除するために使用されます。

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

構文

この関数はjQuery 1.7で追加されました。主に次の 2 つの使用形式があります。

使用方法 1:

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

使用方法 2:

jQueryObject.off( eventsMap [, selector ] )

パラメータ

パラメータの説明

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

eventsMap オブジェクト タイプは Object オブジェクト で、その各属性はイベント タイプとオプションの名前空間 (パラメーター イベント) に対応し、属性値はバインドされたイベント処理関数 (パラメーター ハンドラー) に対応します。

selector オプション/文字列型 どの子孫要素がバインドされたイベントをトリガーできるかを指定するために使用される jQuery セレクター。このパラメーターが null または省略された場合、現在の要素自体がイベントにバインドされていることを意味します (イベント ストリームが現在の要素に到達できる限り、実際のトリガーは子孫要素である場合もあります)。

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

off() 関数は、現在一致する要素の子孫要素セレクターにバインドされている events イベントのイベント ハンドラーを削除します。

セレクターパラメーターが省略された場合、任意の要素にバインドされているイベントハンドラーが削除されます。

パラメーター セレクターは、on() 関数を通じてバインディングを追加するときに渡されるセレクターと一致している必要があります。

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

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

戻り値

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

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

例と説明

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

CodePlayer

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

function btnClick2() {

alert( this.value + "-2" );

}

var $body = $("body");

// イベントハンドラー btnClick1

をクリックにバインドしますすべてのボタン要素のイベント $body.on("click", ":button", btnClick1 );

// イベント ハンドラー btnClick2 をすべてのボタン要素のクリック イベントにバインドします

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

//すべての a 要素のクリック、マウスオーバー、マウスリーブ イベントをバインドします

$body.on("クリック マウスオーバー マウスリーブ", "a", function(event){

if( .type == "click"){

‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐

} );

}

});

// body 要素がすべてのボタン要素のクリック イベントにバインドするイベント ハンドラーを削除します Function btnClick2

// ボタンをクリックしても、btnClick1 は引き続き実行されます

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

// すべてのボタン要素のクリック イベントにバインドされているすべての body 要素を削除します イベント処理関数 (btnClick1 および btnClick2)

// ボタンをクリックしても無効になります任意のイベント処理関数を実行します

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

// 注: $body.off("click", "#btn1"); off() 関数で指定されたセレクターは、on() 関数で渡されたセレクターと一致している必要があります。

// すべての要素 (ボタンおよび
要素を含む) のクリック イベントに body 要素によってバインドされているすべてのハンドラーを削除します

// ボタンまたはリンクをクリックしても、イベント ハンドラーの実行はトリガーされません

/ / $("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-1、click-2、click-3)

// $btn1.off(".foo"); // を含むすべてのイベント ハンドラーを削除します。クリックイベントだけではない名前空間 foo

以上がjQuery.off() 関数の詳細な使用法を理解します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。