Three ways to use bind/one/live/on event bindings for jquery

This article describes the use of jquery's new event binding mechanism on (). Need a friend to reference under

Today I browsed the list of deprecated in jquery, found that live () and Die () in the inside, hurriedly looked at, found that starting from jQuery1.7, jquery introduced a new event binding mechanism, on () and off () two functions uniformly handle event binding. Because before this there was bind (),
Live (),
Delegate () and other methods to handle event binding, jquery has decided to introduce a new function to unify the event binding method and replace the previous method from the aspect of performance optimization and unified approach.

On (EVENTS,[SELECTOR],[DATA],FN)

Events: One or more space-delimited event types and optional namespaces, such as "click" or "Keydown.myplugin".

Selector: A selector string is used for the descendant of the selector element of the filter's triggering event. If the selector is NULL or omitted, the event is always triggered when it reaches the selected element.

Data: Pass Event.data to the event handler when an event is triggered.

fn: The function that is executed when the event is triggered. A false value can also be a shorthand for a function that returns FALSE.

Replace bind ()

When the second argument ' selector ' is null, the on () and bind () are basically no different in usage, so we can assume that on () is only an optional ' selector ' argument over bind (), so on () can be very convenient to replace the bind ()

Replace Live ()

Before 1.4 It was believed that you would like to use Live () because it could bind events to the current and later added elements, of course, after 1.4 delegate () can do similar things. The principle of live () is simply that it is delegated through the document, so we can also use on () to achieve the same effect as live () by binding events to document.

Live () notation

$ (' #list Li '). Live (' Click ', ' #list Li ',
function () {
function code here.
});

On () notation

$ (document). On (' Click ', ' #list Li ',
function () {
function code
Here.
});

The key here is that the second parameter ' selector ' is working. It is the function of a filter that only the descendant elements of the selected element will trigger the event.

Replace delegate ()
Delegate () was introduced in 1.4 to delegate the event-binding of descendant elements through ancestral elements, in a way similar to the benefits of live (). Only Live () is delegated through the document element, while delegate can be an arbitrary ancestor node. Use on () to implement the proxy notation and delegate () basically consistent.

The wording of delegate ()

$ (' #list '). Delegate (' Li ', ' click ',
function () {
function code here.
});

On () notation

$ (' #list '). On (' Click ', ' Li ', function ()
{
function code here.
});

It seems the order of the first and second arguments is reversed, the other is basically the same.

Summarize
jquery launches on () for 2 purposes, one for the unified interface, and the other to improve performance, so from now on () Replace bind (),
Live (),
Delegate it. In particular, do not use Live (), because it is already in the deprecated list, can be killed at any time. If you only bind an event, then use one (), which does not change.

jquery is an excellent JavaScript framework, in the old version of the main use of the bind () method, in the new version of the two more one (), Live (), the following describes the use of these methods:

1. Bind/unbind

$ (" #id "). Bind (' click ', function () {alert (' tt! ')});

multiple event bindings: Bind also allows you to bind multiple events, with the event names separated by spaces, for example:

$ (' a '). Bind (' Click MouseOver ', function () {

In the latest version of jquery1.4, the Bind method has been improved, and you can pass in a class JSON object in the bind method to bind multiple event handlers at once.

$ (' a '). Bind ({
click:function () {alert (' a ');},
mouseover:function () {alert (' a again! ')}

in function functions , you can also pass a JavaScript object to the function method, the event object is usually omitted.
bind, which is rarely used in general, and is usually handled well in order to resolve the same variable in the same method.

var productname= "Sports Shoes";
$ (' #Area '). Bind (' click ', Function () {
alert ( ProductName);

productname=" necklace ",
$ (' #Area '). Bind (' click ', Function () {
alert ( ProductName);

Because of the variable Productna I was re-assigned, so the output of the message is "necklace", there is no way to see the scope of the following JavaScript variables, to solve this problem must be used to the data parameter,
< BR style= "line-height:10px;" > var productname= "Sports Shoes";
$ (' #Area '). Bind (' click ', {pn:productname},function () {
alert (EVENT.DATA.PN);
});
productname= "necklace",
$ (' #Area '). Bind (' click ', { Pn:productname},function () {
alert (EVENT.DATA.PN);

$ (' a '). One ( ' Click ', Function () {
alert (' a ');
})

$ (' a '). Live (' Click,function () {

and then if I add an element ,

$ (' body '). Appnend (' another Element ');

Then the element will also be triggered by the event handler alert.

There are the following event names: b Lur, Focus, Focusin, focusout, load, resize, scroll, unload, click, DblClick, MouseDown, MouseUp, MouseMove, MouseOver, MO Useout, MouseEnter, MouseLeave, change, select, Submit, KeyDown, KeyPress, KeyUp, error, etc.