Parsing jQuery's three bind and One and Live event bindings

JQuery is an excellent JavaScript framework. In the old version, the bind() method was mainly used. In the new version, there are two more methods, One() and Live().

1. The bind/Unbind
In jquery's event model, there are two basic event-binding functions, bind and unbind, which are meant to match page elements for processing related events. For example, onfocus, onblur, onmouseover, onmousedown and other events that we often use in JS can be passed as parameters of bind.

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

The first argument to bind means the event type (note that you don't need to add on), and the code in function is the logical code you want to execute
Multiple event bindings: bind also allows you to bind multiple events. Event names are separated by Spaces, for example:

$(' a '). The bind (' click mouseover ', function () {

In the latest version of query1.4, the bind method has been improved so that you can pass in a json-like object in the bind method to bind multiple event handlers at once.

$(' a '). The bind ({
Click: function () {alert (' a '); },
Mouseover: function () {alert (' a again! ')}

In the function function, you can also pass a javaScript pair to the function method, which is usually omitted.
There is also a parameter called data in bind, which is rarely used in general and is usually handled well in order to handle the same variable in the same method.

Var productname = "Sports Shoes";
$(' # Area). The bind (' click ', function () {
Alert (productname);
});

Productname = "necklace",
$(' # Area). The bind (' click ', function () {
Alert (productname);
});

Since the variable productname is reassigned, the output messages are "necklace". If you don't know, you can look up the variable scope of JavaScript. To solve this problem, you must use the data parameter.

Var productname = "Sports Shoes";
$(' # Area). The bind (' click '{pn: productname}, function () {
Alert (event. The data. The pn);
});
Productname = "necklace",
$(' # Area). The bind (' click '{pn: productname}, function () {
Alert (event. The data. The pn);
});

2. One
Bind a one-time event handler for each specific event (like click) that matches the element. This method, like the parameters of the bind method, is different from the bind method in that it only executes once for the event handling of the matching element, and after that, it never executes again, and of course it executes again when the web request is restarted.

$(' a '). One (' click ', function () {
Alert (' a ');
})

After clicking the a element on the page, a message pops up, and clicking the a element again does not pop up the message dialog unless the user makes a second request.

3. Live
This method mainly handles dynamically added elements, binding events to those that are added later.

$(' a '). The live (' click, function () {
Alert (' show message! ');
})

And then if I add an element,

$(" body "). Appnend (' Another Element ');

The element is also triggered by the event handler alert.
In addition, jQuery provides some easy ways to bind these standard event types, such as.click() to simplify.bind(' click').

There are the following event names: Blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, Keyup, error, etc.