jQuery on() メソッドの例と利点

jquery on() メソッドを使用して events をバインドすることは、公式に推奨されている方法です。 次に、エディターに従って jquery on() メソッドを学習してください。イベントをバインドするための公式に推奨される方法。

$(selector).on(event,childSelector,data,function,map)

これを拡張した以前の一般的なメソッドのいくつかは次のとおりです。

bind()

　$("p").bind("click",function(){
　　　　alert("The paragraph was clicked.");
　　});
　　$("p").on("click",function(){
　　　　alert("The paragraph was clicked.");
　　});

delegate()

$("#p1").on("click","p",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("#p2").delegate("p","click",function(){
　　　　$(this).css("background-color","pink");
　　});

live()

　　$("#p1").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("#p2").live("click",function(){
　　　　$(this).css("background-color","pink");
　　});

上記の 3 つのメソッドは jQuery1 にありますが、推奨されません.8

以降で使用するには、

1.9でlive()メソッドの使用が中止されたため、on()メソッドを使用することをお勧めします。 ヒント: on() にバインドされたメソッドを削除する必要がある場合は、off() メソッドを使用できます。

$(document).ready(function(){
　　$("p").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("button").click(function(){
　　　　$("p").off("click");
　　});
});

ヒント: イベントに必要な操作が 1 つだけの場合は、one() メソッドを使用できます

$(document).ready(function(){
　　$("p").one("click",function(){
　　　　$(this).animate({fontSize:"+=6px"});
　　});
});

trigger() binding

$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
　　$("input").select(function(){
　　　　$("input").after(" Text marked!");
　　});
　　$("button").click(function(){
　　　　$("input").trigger("select");
　　});
});

複数のイベントは同じ関数にバインドされます

$(document).ready(function(){
 $("p").on("mouseover mouseout",function(){
  $("p").toggleClass("intro");
 });
});

複数のイベントを異なる関数にバインドする

$(document).ready(function(){
 $("p").on({
  mouseover:function(){$("body").css("background-color","lightgray");}, 
  mouseout:function(){$("body").css("background-color","lightblue");}, 
  click:function(){$("body").css("background-color","yellow");} 
 });
});

カスタムイベントをバインドする

$(document).ready(function(){
 $("p").on("myOwnEvent", function(event, showName){
  $(this).text(showName + "! What a beautiful name!").show();
 });
 $("button").click(function(){
  $("p").trigger("myOwnEvent",["Anja"]);
 });
});

関数にデータを渡す

function handlerName(event) 
{
 alert(event.data.msg);
}
$(document).ready(function(){
 $("p").on("click", {msg: "You just clicked me!"}, handlerName)
});

未作成の要素に適用可能

$(document).ready(function(){
 $("p").on("click","p",function(){
  $(this).slideToggle();
 });
 $("button").click(function(){
  $("<p>This is a new paragraph.</p>").insertAfter("button");
 });
});

jQueryバインドイベントはいくつかあるのでおすすめです。バインドには .on() メソッドを使用します。理由は 2 つあります:

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

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

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 );
}

.on() によってバインドされたイベントを削除するには、.off() メソッドを使用します。

2.on() メソッド バインディング イベントにより効率が向上します

多くの記事で、イベント バブリングとプロキシを使用してイベント バインディングの効率を向上させることが記載されていますが、そのほとんどは具体的な違いをリストしていませんでした。ちょっとしたテストをしてみます。 5000 li がページに追加され、Chrome 開発者ツールのプロファイルを使用してページの読み込み時間をテストすると仮定します。

通常のバインディング(と呼びます)

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

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

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

.on() binding

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

バインドプロセスの実行時間

2013-08-13_191010.on() binding はイベントプロキシを利用しており、ドキュメントには 1 つだけ登録されています。イベントは約 2.2M のメモリを消費し、バインド時間は約 1 ミリ秒です。

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