イベントバインディングを削除する際のjquery-フロントエンドQ&A-php.cn

イベントバインディングを削除する際のjquery

PHPz

リリース： 2023-05-28 17:38:38

オリジナル

725 人が閲覧しました

フロントエンド開発では、さまざまなインタラクティブな効果を実現するために、イベントをページ要素にバインドして、特定のシナリオで特定の操作を実行できるようにします。ただし、イベントのバインドを削除する必要がある場合があります。たとえば、要素が破棄された場合、またはイベントをリッスンする必要がなくなった場合、対応するイベントハンドラーを要素からバインド解除する必要があります。 jQuery では、イベントのバインドとバインド解除を実装するために、on()、off()、unbind() wait などの複数のメソッドが提供されています。この記事では主に on() メソッドのイベントバインディングを削除する方法を紹介します。

jQuery イベント処理

jQuery には通常、bind()、delegate()、 という 3 つのイベント処理メソッドがあります。ライブ（）＃＃＃。このうち、delegate() はほとんど使用されず、動的に追加される子要素に対して親要素のイベントハンドラを追加するのが主な機能であり、live() は jQuery1.7 で非推奨となりました。バージョン 1 以降は on() で置き換えることができます。

on() は、jQuery で一般的に使用されるイベント処理メソッドであり、1 つ以上のイベント処理関数を指定された要素にバインドするために使用されます。一般的な使用方法は次のとおりです。

$(selector).on(event, handler);

ログイン後にコピー

このうち、

selector はイベントにバインドする必要があるターゲット要素であり、ラベル、クラス名、ID などのセレクターが可能です。など; event これはクリック、マウスオーバー、キーアップなどのバインドされたイベントタイプです; handler はイベント処理関数であり、匿名関数または定義された関数名。

プロジェクトの要件とコードの規模が拡大し続けると、要素が複数のコールバック関数によって同じイベントにバインドされる場合があります。このとき、要素にバインドされている要素を削除する必要があります。またはすべてイベントハンドラ。次に、

on() のパラメータを使用してイベントのバインドを削除する方法を紹介します。

指定されたハンドラーを削除する

要素の指定されたイベントハンドラーを削除するだけの場合は、

off() メソッドを使用できます。このメソッドは、指定された要素に関連するイベントハンドラー関数を削除するために使用されます。一般的な使用方法は次のとおりです。

$(selector).off(event, handler);

ログイン後にコピー

このうち、

selector は削除する必要がある要素であり、ラベル、クラス名、ID などのセレクターが可能です。 ; event クリック、マウスオーバー、キーアップなど、削除する必要があるイベントタイプです。; handler は、削除するイベント処理関数です。匿名関数または定義された関数名。

次に、特定の例を使用して、

off() メソッドを使用してイベントバインディングを削除する方法を示します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>移除指定事件处理程序</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button id="btn">点击绑定事件</button>
    <script>
        function handleClick() {
            console.log('处理click事件');
        }

        $('#btn').on('click', handleClick);

        setTimeout(() => {
            $('#btn').off('click', handleClick);
            console.log('移除click事件处理程序');
        }, 2000);
    </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、ボタン要素に

click イベントをバインドし、バインドされたイベントハンドラーは handleClick です。次に、2 秒後、off() メソッドを使用して、クリックイベントハンドラー handleClick を削除します。ボタンをクリックすると、イベントを処理する情報がコンソールに表示されます。ハンドラーを削除した後、ボタンを再度クリックしても何も起こりません。これは、off() メソッドを通じて指定されたイベントハンドラーを削除する基本的な操作です。

要素に関連するすべてのハンドラーを削除します

開発中に、要素にバインドされているすべてのイベントハンドラーを削除する必要がある場合もあります。この場合、

別の形式の off を使用できます。 () メソッド:

$(selector).off(event);

ログイン後にコピー

このメソッドは 1 つのパラメーター

event を渡すだけで済みます。これにより、指定されたタイプのすべてのイベントハンドラーが要素から削除されます。

one()

off() に加えて、jQuery にはイベントバインディングを削除するために使用できる別のメソッド one があります()。このメソッドは on() に非常に似ていますが、イベントを 1 回だけリッスンし、実行後に自動的にバインドを解除します。したがって、一度だけ実行する必要がある要素にイベントハンドラーを追加する必要がある場合は、on() の代わりに one() を使用してイベントを手動でバインドできます。手動でバインドを解除する必要はありません。

$(selector).one(event, handler);

ログイン後にコピー

on() メソッドと同様に、one() も 2 つのパラメーターを受け取り、バインドされるイベントタイプとハンドラーを指定します。指定されたイベントタイプがトリガーされると、ハンドラーが実行されます。ハンドラーの実行が完了すると、対応するイベントは自動的に削除されます。

unbind()を使用する

unbind() メソッドを使用して、イベントバインディングを削除することもできます。 off() と同様に、unbind() にも 2 つの使用法があります。1 つは、指定されたイベントハンドラーを削除すること、もう 1 つはすべての種類のイベントハンドラーを削除することです。使用方法は次のとおりです。

$(selector).unbind(event, handler); // 移除指定事件处理程序

$(selector).unbind(event); // 移除全部事件处理程序

ログイン後にコピー

概要

この記事では主に

on()、off()、 の使用方法を紹介します。 1 つは jQuery () メソッドと unbind() メソッドで、イベントのバインド操作とバインド解除操作を処理します。さまざまなニーズに応じて、イベントバインディングを処理する適切な方法を選択して、コードをより柔軟かつ効率的に行うことができます。バインドを解除するときは、パラメータの正しい受け渡しに注意する必要があることに注意してください。そうしないと、予期しない状況が発生する可能性があります。

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