jQuery binding event method and difference (bind, click, on, live, one)

The first method:

$(document).ready(function(){
 $("#clickme").click(function(){
 alert("hello world click")
 })
})

The second method (the abbreviation is the first):

$('#clickmebind').bind("click", function(){
 alert("Hello World bind");
});

The third method:

$('#clickmeon').on("click",function(){
 alert("hello world on")
}) 

Note: The third method is only applicable to jquery version 1.7 or above

The fourth method:

$("button").live("click",function(){
 $("p").slideToggle();
});

The fifth method:

$("div").delegate("button","click",function(){
 $("p").slideToggle();
});

If you only bind the event once, then use one(), this has not changed.

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

Let's learn about the differences between them

bind(type,[data],fn) binds event handler function for specific event of each matching element
$(“a”).bind(“click”,function(){alert(“ok”);});

live(type,[data],fn) Append an event handler to all matching elements, even if this element is added later
$(“a”).live(“click”,function(){alert(“ok”);});

delegate(selector,[type],[data],fn) The specified element (a child element belonging to the selected element) adds one or more event handlers and specifies the function to run when these events occur
$(“#container”).delegate(“a”,”click”,function(){alert(“ok”);})

on(events,[selector],[data],fn)Event handler function that binds one or more events on the selection element

The biggest difference: The event function of bind() can only set events for existing elements. If you want to create dynamically for the bind() event of the element, there is no way to achieve the effect, but live(), on(), and delegate() all support event settings for newly added elements in the future.

.bind() is directly bound to the element ()
jquery version 1.7 was previously popular. After version 1.7 came out, the official no longer recommended using bind(), and the replacement function is on(). This is also a newly added function in version 1.7. It can also be used instead of live() function. The live() function has been deleted in version 1.9;

.delegate() is a more accurate and small-scale use of event proxy, with better performance than .live() (removed in Jquery 1.7)

.live() is bound to the element through bubbles.More suitable for list type, bind to document
on the DOM node. The advantage of .bind() is that it supports dynamic data. (It has been removed in Jquery 1.7, and the corresponding die() has also been removed)

The live() function and the delegate() function are similar, but the live() function is worse than the delegate() in terms of execution speed, flexibility and CSS selector support.

.on() is the latest version 1.9 that integrates the new event binding mechanism of the previous three methods (added in Jquery 1.7, and corresponding off() is also added)

In jquery1.4 and previous versions, events bound by .click() or bind() methods cannot apply to new elements created by scripts: that is, after the page is loaded, the DOM element created dynamically cannot respond to the previously bound events!

The old version of the processing method is to use the .live() method instead of event binding.bind(), so that the bound events can be applied to new elements created by the script.

However, since the jq1.7 version, the official has clearly stated that it is no longer recommended to use the .live() method. The official explanation is that the live() call process first binds the event method to the Document, and then finds whether there are matching elements in the Document.
This process may be a waste of performance. The official recommendation is to change .live() to Delegate() method to apply to new elements created by scripts.

Starting from jq1.8, the official stated again: If you develop the latest version of jQuery, you can use the on() method to handle all event bindings to avoid too many method calls, because in the latest version of jQuery class library, all the above old methods actually call the on() method later.

Summarize

There are two purposes for jQuery to launch on(), one is to unify the interface, and the other is to improve performance. So from now on, replace bind(), live(), and delegate with on().