jqueryのonメソッドの利点は何ですか

jquery の on メソッドの利点: 1. on() メソッドはページ要素に動的に追加されたイベントをバインドでき、追加されたイベント ハンドラーは現在および将来の要素に適用できます; 2. on() メソッドの追加1 つの要素に対して 1 つ以上のイベント ハンドラーを同時に実行すると、効率が向上します。

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

on() メソッドは、選択した要素およびサブ要素に 1 つ以上のイベント ハンドラーを追加します。

jQuery バージョン 1.7 以降、on() メソッドは、bind()、live()、および delegate() メソッドに代わる新しいメソッドです。このメソッドは API に多くの利便性をもたらし、jQuery コード ベースを簡素化するため推奨されます。

単一の要素に対して個別の登録イベントを記述するのは面倒です

$("p").click(function(){
  $(this).hide();
});
$("p").mouseenter(function(){
  $(this).css("background","blue");
});

そのため、on

$("p").on({
  click:function(){
    $(this).hide();
  },
  mouseenter:function(){
    $(this).css("background","blue");
  }
});
 
//还可以合并
$("div").on( "mouseenter mouseleave", function(){
    $(this).toggleclass( "current");
})

イベントをバインドするメソッドを使用して複数のイベントを一度に登録できますjQuery にはいくつかの機能がありますが、次の 2 つの理由により、バインドには .on() メソッドを使用することをお勧めします:

1. on() メソッドは、ページ要素に動的に追加されたイベントをバインドできます。

たとえば、ページに動的に追加される DOM 要素の場合、.on() メソッドにバインドされたイベントは、イベントを登録した要素がいつ追加されるかを気にする必要はありません。繰り返しバインドする必要があります。 .bind()、.live()、または .delegate() の使用に慣れている学生もいるかもしれませんが、ソース コードを見ると、実際には .on() メソッドと .live() メソッドを呼び出していることがわかります。メソッドは jQuery1 にあります。バージョン 9 は削除されました。

on() メソッドを使用して追加されたイベント ハンドラーは、現在および将来の要素 (スクリプトによって作成された新しい要素など) に適用されます。

bind:

function(
 types, data, fn ) {
  return this.on(
 types, null,
 data, fn );
},

live:

function(
 types, data, fn ) {
  jQuery(
this.context
 ).on( types, this.selector,
 data, fn );
  return this;
},

delegate:

function(
 selector, types, data, fn ) {
  return this.on(
 types, selector, data, fn );
}

2、on() メソッドを 1 回パフォーマンス 要素に 1 つ以上のイベント ハンドラーを追加すると、効率が向上します。

多くの記事で、イベント バブリングとプロキシを使用してイベント バインディングの効率を向上させることが記載されていますが、そのほとんどは具体的な詳細を記載していません。違いがあるので、確認するために簡単なテストを行ってみました。

5,000 リーがページに追加され、Chrome 開発者ツールのプロファイルを使用してページの読み込み時間をテストすると仮定します。

• 通常のバインディング (そう呼びましょう)

$("li").click(function(){
  console.log(this)
});

$(document).on("click","li",function(){
  console.log(this)
})

バインディングの実行処理時間

• 通常のバインディングはクリックイベントをliに個別に登録するのと同等で、メモリ使用量は約4.2M、バインディング時間は約72msです。

• .on() バインディングはイベント プロキシを使用し、ドキュメントに登録されるクリック イベントは 1 つだけです。メモリ使用量は約 2.2M、バインド時間は約 1ms です。

[推奨学習: jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ ]

以上がjqueryのonメソッドの利点は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。