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

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

WBOY

リリース： 2016-05-16 15:42:07

オリジナル

1100 人が閲覧しました

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() メソッドを学ぶのに役立つことを願っています。