jQuery.undelegate()関数の使い方の詳しい説明

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

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

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

Syntax

jQuery 1.4.2でこの機能が追加されました。主に以下の 3 つの使用形式があります。

使用法 1:

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

現在一致する要素の events イベントにセレクター要素としてバインドされているイベント ハンドラーを削除します。

使用法 2: jQuery 1.4.3 では、この使用法が新たにサポートされました。

jQueryObject.undelegate( selector , eventsMap )

使用法 1 の変形で、複数のイベント タイプの複数のイベント ハンドラーを同時に削除するために使用されます。 eventsMap はオブジェクトです。各 attribute はメソッド 1 のパラメーター イベントに対応し、値はメソッド 1 のパラメーター ハンドラーに対応します。

使用法 3: jQuery 1.6 では、この使用法が新たにサポートされました。

jQueryObject.undelegate( namespace )

すべての要素の namespace 名前空間を含むイベントに対して、現在一致している要素上のすべてのイベント ハンドラーを削除します。

parameters

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

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

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

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

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

戻り値

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

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

示例&说明

请参考下面这段初始HTML代码：

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

首先，我们为上述button和元素绑定事件，然后使用undelegate()函数解除事件绑定，相应的代码如下：

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

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

var $body = $("body");

// 在body元素上为所有button元素的click事件绑定事件处理函数btnClick1
$body.delegate( ":button", "click", btnClick1 );

//在body元素上为所有button元素的click事件绑定事件处理函数btnClick2
$body.delegate( ":button", "click", btnClick2 );

//为所有a元素绑定click、mouseover、mouseleave事件
$body.delegate( "a", "click mouseover mouseleave", 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.undelegate(":button", "click", btnClick2);


//移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)
//点击按钮，不会执行任何事件处理函数
// $body.undelegate(":button", "click");


//注意： $body.undelegate("#btn1", "click"); 无法移除btn1的点击事件，undelegate()函数指定的选择器必须与delegate()函数传入的选择器一致。


// 移除body元素为所有元素(包括button和<a>元素)的任何事件绑定的所有处理函数
// 点击按钮、链接，或用鼠标在链接上移入、移出，都不会触发执行任何事件处理函数
//$("body").undelegate( );

此外undelegate()函数还可以只移除指定命名空间的所有元素的所有事件绑定。

var $body = $("body");

$body.delegate("#btn1", "click.foo.bar", function(event){
    alert("click-1");
});

$body.delegate("#btn1", "click.test", function(event){
    alert("click-2");
});

$body.delegate("#btn1", "click.test.foo", function(event){
    alert("click-3");
});

// $body.undelegate(".test"); // 移除click-2、click-3

// $body.undelegate(".foo");  // 移除click-1、click-3

// $body.undelegate(".foo.bar");  // 移除click-1

以上がjQuery.undelegate()関数の使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。