JQueryon () method example and advantages of jqueryon () method _ jquery

Binding events using the jqueryon () method is officially recommended. Next, let's take a look at the jqueryon () method. let's take a look at jQuery on () this method is officially recommended to bind events.

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

Several common methods that were extended previously were.

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");　　});

The above three methods are available inJQuery1.8It is not recommended later.1.9 hoursCanceledLive ()Method, so we recommend that you useOn ()Method.

Tip: If you need to remove the method bound to on (), you can use the off () method for processing.

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

Tip: If your event only requires one operation, you can use the one () method.

$(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");　　});});

Bind multiple events to the same function

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

Bind multiple events to different functions

$(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");}  });});

Bind custom events

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

Transfer data to functions

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

Applicable to uncreated elements

$(document).ready(function(){ $("p").on("click","p",function(){  $(this).slideToggle(); }); $("button").click(function(){  $("
This is a new paragraph.
").insertAfter("button"); });});

JQuery binds events in several ways. we recommend that you bind events using the. on () method for two reasons:

1. the on () method can bind events dynamically added to page elements.

For example, when a DOM element is dynamically added to a page, events bound using the. on () method do not need to worry about when the elements registered for this event are added or need to be bound repeatedly. Some may be used to it. bind (),. live () or. delegate (), view the source code and you will find that they actually call all of them. on () method, and. the live () method has been removed in jQuery1.9.

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 );}

Remove events bound to. on () using the. off () method.

2. bind events using the on () method to improve efficiency

Many articles have mentioned how to use event bubbles and proxies to improve the efficiency of event binding. most of the differences are not listed. Therefore, I will perform a small test to verify the difference.

Assume that 5000 li is added to the page and the page loading time is tested using the chrome developer tool Profiles.

Normal binding (this is what we call it)

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

Binding process execution time

2013-08-13_0000358

Normal binding is equivalent to registering click events on 4.2 Li respectively. the memory usage is about MB, and the binding time is about 72 ms.

. On () binding

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

Binding process execution time

2013-08-13_191010

. On () binding uses the event proxy. only one click event is registered on the document. the memory usage is about 2.2 MB and the binding time is about 1 ms.

The above is all of the content in this article. I hope it will help you learn the jquery on () method.