jQuery on() メソッドの例と利点-jsチュートリアル-php.cn

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

巴扎黑

リリース： 2017-06-25 10:37:43

オリジナル

1241 人が閲覧しました

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 開発者ツールのプロファイルを使用してページの読み込み時間をテストすると仮定します。

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

$(&#39;li&#39;).click(function(){
  console.log(this)
});

ログイン後にコピー

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

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

.on() binding

$(document).on(&#39;click&#39;,
&#39;li&#39;,
function(){
  console.log(this)
})

ログイン後にコピー

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

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

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