JQuery の on() 関数はイベントを繰り返しバインドしますか?

JQuery は、フロントエンド開発で便利な DOM 操作とイベント処理を提供する人気のある JavaScript ライブラリであり、Web 開発では不可欠なツールの 1 つです。 JQuery を使用する場合、イベント バインディング関数 on() をよく使用しますが、多くの開発者は「JQuery の on() 関数はイベントを繰り返しバインドするのでしょうか?」という疑問に遭遇することがあります。

まず、on() 関数の定義と使用法を見てみましょう:

$(selector).on(event, childSelector, data, function(){...})

その中で、セレクターはイベントがバインドされる要素であり、イベントはバインドされる要素ですイベント タイプ、childSelector はイベント デリゲートの子要素セレクターを宣言します。data はイベント ハンドラーに渡されるデータ、function はバインドされたイベント ハンドラーです。

on() 関数の動作原理は次のとおりです。イベントがトリガーされると、セレクターによって一致した要素が、対応するイベント ハンドラーによって処理されます。 on() 関数は、選択した要素のイベント リスナー リストにイベント ハンドラーを追加します。

では、on() 関数を複数回使用して同じイベント タイプをバインドするとどうなるでしょうか?

実際には、on() 関数が呼び出されるたびに、同じイベント ハンドラーがすでにバインドされている場合でも、このイベント タイプのイベント ハンドラーがイベント リスナー リストに追加されます。これは、on メソッドを複数回使用して同じイベントをバインドすると、同じイベント ハンドラーがイベント リスナー リストに繰り返し追加されることを意味します。

たとえば、次のコードはクリック イベントを繰り返しバインドします:

$(selector).on('click', function(){...});
$(selector).on('click', function(){...});
$(selector).on('click', function(){...});

このようにして、要素がクリックされるたびに、JQuery はバインドの順序でイベント ハンドラーを 3 回実行します。 。

ただし、on() 関数を使用してイベント ハンドラーをバインドする場合は、再度 off() 関数を使用してイベント ハンドラーのバインドを解除し、再度 on() 関数を使用してイベント ハンドラーをバインドします。 、このイベント ハンドラーは 1 回だけ追加されます。なぜなら、off() 関数を使用してイベントのバインドを解除すると、JQuery はイベント リスナー リストからイベント ハンドラーを削除し、on() 関数を再度使用するときにそれを再追加するからです。

したがって、off() 関数を使用してイベントのバインドを解除することで、on() 関数によるイベントの繰り返しバインドの問題を回避できます。

$(selector).on('click', function(){
   // code here;
   $(selector).off('click');//解绑click事件
   $(selector).on('click', function(){
     // do something
   });
});

上記のコードでは、イベント ハンドラーで off() 関数を使用して、クリック イベントのバインドを解除します。次に、新しいクリック イベントがイベント ハンドラーで再バインドされ、新しいイベント ハンドラーが追加されました。

もちろん、on() 関数がイベントを繰り返しバインドすることを避けるために、off() 関数を使用してイベントのバインドを解除することに加えて、イベントがイベント内にすでに存在するかどうかを判断することによって繰り返しバインドを防ぐこともできます。リスナーリスト。

if(!$(selector).data('hasBind')){
  $(selector).data('hasBind', true).on('click', function(){
    // do something
  });
}

上記のコードでは、data() メソッドを使用して要素に hasBind 属性を作成し、その初期値を false に設定します。そして、hasBind 属性の値を判定し、false であればイベントをバインドし、hasBind 属性の値を true に設定し、今後繰り返しバインドされないようにする。

要約すると、JQuery の on() メソッドはイベントを繰り返しバインドするため、off() 関数を使用してイベントのバインドを解除するか、イベントが既にイベント リスナー リストに存在するかどうかを判断して重複を防ぐ必要があります。バインディング。これにより、イベントをバインドする際の繰り返し実行の問題をより適切に回避し、フロントエンド開発の効率を向上させることができます。

以上がJQuery の on() 関数はイベントを繰り返しバインドしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。