jQueryはライブリスナーを削除します

Web アプリケーションを開発する場合、カスタム イベント ディスパッチャーを使用してリスナーを追加するのが一般的です。 jQuery は、開発者が DOM 要素にリスナーを追加し、DOM 要素によってトリガーされるイベントを処理できるようにする非常に強力なイベント システムを備えた非常に人気のある JavaScript ライブラリです。これらのイベント リスナーを使用すると、AJAX リクエストの送信、サーバーへのデータのプッシュなど、いくつかのアクションを実行できます。

ただし、開発者は、DOM 要素からリスナーを適切に削除する方法も知っておく必要があります。この記事ではjQueryを使ってライブリスナーを削除する方法を紹介します。

jQuery 1.7 より前では、live() メソッドを使用してイベント リスナーを追加する必要がありました。サンプル コードは次のとおりです:

$('a').live('click', function() {
    console.log('clicked');
});

このコード ブロックはリスナーを追加します。a 要素をクリックすると、コンソールにメッセージが表示されます。

ここで、ある時点で a 要素からリスナーを削除したいとします。どうすればよいでしょうか?

jQuery では、リスナーを削除する場合、unbind() メソッドを使用して、対応するイベント タイプとハンドラー関数を指定できます。しかし、ここではこのアプローチは機能しません。その理由は、 live() メソッドによって追加されたリスナーが実際には DOM 要素自体に存在せず、ドキュメント全体に実装されているためです。

したがって、unbind() メソッドを使用してライブ イベント リスナーを削除しようとすると、正しく機能しません。つまり、このイベント リスナーは、ページが閉じるかリロードされるまで存在します。

この問題を解決するために、jQuery チームは、live() の代わりに使用できる新しいメソッド delegate() を開発しました。 delegate() メソッドを使用して追加されたリスナーは、off() メソッドを使用して削除できます。

以下は、delegate() メソッドを使用して前のコード例を書き直す新しいコードです:

$(document).delegate('a', 'click', function() {
    console.log('clicked');
});

ここでは、delegate() メソッドを使用してイベント リスナーを追加します。最初のパラメータは監視する要素を指定するセレクタ、2 番目のパラメータは指定されたイベント タイプ、3 番目のパラメータはイベント処理関数です。

ここで、ある時点でこのイベント リスナーを削除したい場合は、以下に示すように、off() メソッドを使用できます。

$(document).off('click', 'a', function() {
    console.log('clicked');
});

この新しいコード ブロックでは、off() を渡します。 ) リスナーをクリアするメソッド。最初のパラメータはイベント タイプ、2 番目のパラメータはセレクタ、3 番目のパラメータは削除するイベント ハンドラです。セレクターが接続されている特定のリスナーを単に削除することはできないため、イベント ハンドラーは正確に一致する必要があることに注意してください。

要素のクリック イベント自体はここでは変更されませんが、イベント リスナーはページ全体で削除されます。したがって、将来新しいライブ イベント リスナーを追加する場合は、新しい delegate() メソッドを使用するだけでリスナーを追加でき、古いリスナーが新しいリスナーに与える影響を心配する必要はありません。

概要

この記事では、jQuery でライブ リスナーを削除する方法を学びました。 jQuery を使用してイベント リスナーを追加すると、特定の DOM 要素ではなくドキュメント全体にイベント リスナーがアタッチされます。したがって、このタイプのリスナーを削除するには、live() メソッドの代わりに delegate() メソッドを使用し、off() メソッドを使用して対応するリスナーを削除する必要があります。他のタイプのイベント リスナーが削除されないようにするには、正しい構文を使用して、削除する指定されたリスナーのみが削除されるようにしてください。

以上がjQueryはライブリスナーを削除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。