jqueryのバインドされたイベントの削除-フロントエンドQ&A-php.cn

Web 開発では、さまざまなユーザー操作をより効率的かつ柔軟に処理できるように、通常、jQuery を使用してイベントハンドラーをバインドします。ただし、DOM 要素が削除された場合や、条件が変更されてイベントのバインディングを変更する必要がある場合など、バインドされたイベントを削除する必要がある場合があります。では、jQuery で既にバインドされているイベントを削除するにはどうすればよいでしょうか?この記事では、イベントのバインドと削除をより適切に処理するのに役立ついくつかの一般的な方法とテクニックを紹介します。

1. unbind() メソッドを使用する

jQuery は、イベントのバインド解除に特化した unbind() というメソッドを提供します。このメソッドは、要素から 1 つ以上のイベントハンドラーを削除するか、名前空間からすべてのイベントハンドラーを削除します。

unbind() メソッドの構文は次のとおりです。

$(selector).unbind(event,[callback])

Amongそれら、セレクターは必要性を表します。削除イベントの要素セレクター、イベントは破棄されるイベントの種類、コールバックは破棄されるイベントハンドラーの関数名を表します。コールバックが省略された場合、要素にバインドされている指定されたイベントタイプのすべてのハンドラーが破棄されます。

たとえば、次のコードはすべてのクリックイベントハンドラーを削除できます:

//解绑定所有click事件 $("#myButton").unbind("click");

ログイン後にコピー

特定のイベントハンドラーのバインドを解除する必要がある場合は、たとえば、バインドを解除する関数名を指定できます。 ##

//移除指定的事件处理程序 function myClickHandler() { alert("按钮被点击了"); } $("#myButton").bind("click", myClickHandler); //解绑定某个特定的事件处理程序 $("#myButton").unbind("click", myClickHandler);

ログイン後にコピー

2. off() メソッドを使用する

unbind() メソッドに加えて、jQuery は、off() と呼ばれる、より柔軟なイベントバインド解除メソッドも提供します。 unbind() メソッドと比較して、off() メソッドでは、要素の複数のイベントハンドラーのバインドを解除でき、より複雑なイベントバインディングシナリオをサポートします。

off() メソッドの構文は次のとおりです:

$(selector).off(event,[selector],[callback])

ここで、 selector は削除する必要があるイベントの要素セレクターを表し、event は解放されるイベントの種類を表し、selector は解放されるサブ要素セレクターを表し、callback は削除するイベントハンドラーの関数名を表します。解放されます。セレクターとコールバックを省略した場合、要素にバインドされている指定されたイベントタイプのすべてのハンドラーが削除されます。

たとえば、次のコードは、子要素のすべてのクリックイベントとすべてのクリックイベントハンドラーを削除できます。

//解除绑定所有click事件 $("#myButton").off("click"); //解除绑定子元素上的click事件 $("#myDiv").off("click", "button");

ログイン後にコピー

イベントハンドラーが名前空間を使用して定義されている場合は、次の例に示すように、off() メソッドを使用して複数の名前空間のイベントハンドラーを同時に解放できます:

//指定多个命名空间解除事件处理程序 $("#myButton").off("click.myNamespace1.myNamespace2");

ログイン後にコピー

3. 必要に応じて、one() メソッドを使用します。一度トリガーした後にイベントハンドラーを自動的に削除するには、one() メソッドを使用できます。 one() メソッドは、バインドされたイベントが 1 回だけトリガーされる点を除いて、bind() メソッドに似ています。

one() メソッドの構文は次のとおりです。

$(selector).one(event,[data],[callback])

ログイン後にコピー

このうち、selector はイベントにバインドする必要がある要素セレクターを表し、event はバインドするイベントの種類を表します。、 data はイベントハンドラーの追加データに渡されるオプションを表します。 callback はバインドされるイベントハンドラーの関数名を表します。

たとえば、次のコードは 1 回だけ実行されるクリックイベントハンドラーをバインドできます:

//绑定仅执行一次的click事件处理程序 $("#myButton").one("click", function() { alert("按钮被点击了"); });

ログイン後にコピー

このコードでは、alert() 関数はボタンが 1 回クリックされた場合にのみ実行されます。、その場合、イベントは応答しなくなります。

4. undelegate() メソッドを使用する

jQuery の初期バージョンでは、通常、イベントハンドラーをバインドするために delegate() メソッドを使用していました。このメソッドはセレクターパラメーターを受け入れてイベントハンドラーのターゲット要素を指定します。これにより、イベントバインディングをより柔軟に制御できます。

jquery の開発に伴い、delegate() メソッドは徐々に on() メソッドに置き換えられます。したがって、jquery1.7 バージョン以降では、 delegate() メソッドを使用してイベントのバインドを解除するには、 undelgate() メソッドを使用する必要があります。

undelegate() メソッドの構文は次のとおりです。

$(selector).undelegate([selector],[event],[callback])

ログイン後にコピー

このうち、selector はイベントのバインドを解除する必要がある要素セレクターを表し、event はバインドを解除するイベントの種類を表します。、コールバックはバインドを解除するイベントを表します。指定されたイベントハンドラーの関数名です。コールバックが省略された場合、要素にバインドされている指定されたイベントタイプのすべてのハンドラーが破棄されます。

たとえば、次のコードは、delegate() メソッドを使用してバインドされたすべてのクリックイベントハンドラーを削除できます。

//解除绑定所有click事件 $("#myElement").undelegate("button", "click");

ログイン後にコピー

このコードでは、undelegate() メソッドは、すべてのクリックイベントハンドラーを削除するだけでなく、 button 要素の場合、myElement 要素のすべてのクリックイベントハンドラーも削除されます。

概要:

jQuery を使用してイベントハンドラーをバインドするプロセスでは、イベントを頻繁に追加および削除する必要があります。イベントのバインドを解除するには、unbind()、off( )、one を使用できます。 ()、unelegate()、およびその他のメソッドを実装します。特に複雑な DOM 操作では、イベントのバインディングと削除を正しく行うと、Web アプリケーションの保守性とスケーラビリティが大幅に向上します。したがって、これらの一般的なイベント解除テクニックをマスターすると、Web アプリケーションをより効率的に開発できるようになります。

以上がjqueryのバインドされたイベントの削除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。