jQuery on() 関数の使用法を理解する

巴扎黑
リリース: 2017-06-25 10:33:02
オリジナル
1195 人が閲覧しました

jQueryon() メソッドは、eventsをバインドするための公式に推奨されるメソッドです。

$(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 つのメソッドは、jQuery 1.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(){ $("

This is a new paragraph.

").insertAfter("button"); }); });
ログイン後にコピー
の未作成の要素に適用されます

以上がjQuery on() 関数の使用法を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!