jQuery on()函数用法理解

巴扎黑
Freigeben: 2017-06-25 10:33:02
Original
1195 Leute haben es durchsucht

jQueryon()方法是官方推荐的绑定事件的一个方法。

$(selector).on(event,childSelector,data,function,map)
Nach dem Login kopieren

由此扩展开来的几个以前常见的方法有.

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");   });
Nach dem Login kopieren

以上三种方法在jQuery1.8之后都不推荐使用,官方在1.9时已经取消使用live()方法了,所以建议都使用on()方法。

tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。

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

tip:如果你的事件只需要一次的操作,可以使用one()这个方法

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

trigger()绑定

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

多个事件绑定同一个函数

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

多个事件绑定不同函数

$(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");} }); });
Nach dem Login kopieren

绑定自定义事件

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

传递数据到函数

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

适用于未创建的元素

$(document).ready(function(){ $("p").on("click","p",function(){ $(this).slideToggle(); }); $("button").click(function(){ $("

This is a new paragraph.

").insertAfter("button"); }); });
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonjQuery on()函数用法理解. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!