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

jQuery on() メソッドは、イベントをバインドするために公式に推奨されるメソッドです。

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

これを基に拡張された以前の一般的なメソッドがいくつかあります。

バインド()

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

デリゲート()

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

ライブ()

　　$("#div1").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("#div2").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() バインディング

$(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(){
 $("div").on("click","p",function(){
  $(this).slideToggle();
 });
 $("button").click(function(){
  $("<p>This is a new paragraph.</p>").insertAfter("button");
 });
});

jQuery でイベントをバインドするにはいくつかの方法があります。次の 2 つの理由から、バインドには .on() メソッドを使用することをお勧めします。

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() メソッド バインディング イベントにより効率が向上します

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

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

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

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

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

2013-08-13_190358

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

.on() バインディング

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

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

2013-08-13_191010

.on() バインディングはイベント プロキシを使用し、ドキュメント上のクリック イベントのみを登録します。メモリ使用量は約 2.2M、バインディング時間は約 1 ミリ秒です。

上記がこの記事の全内容です。皆さんが jquery on() メソッドを学ぶのに役立つことを願っています。