How to bind three bind/One/Live events of jQuery

JQuery is an excellent JavaScript framework. In the old version, it mainly uses the bind () method. In the new version, there are two more One (), Live (), the following describes how to use these methods:

1. bind/Unbind
In the event model of jquery, there are two basic event binding functions: bind and unbind. These two functions are used to match page elements to process related events. For example, events such as onfocus, onblur, onmouseover, and onmousedown that we often use in JS can be passed as bind parameters.

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

The first bind parameter indicates the event type (note that you do not need to add on). The Code in function is the logic code you want to execute.
Bind multiple events: bind also allows you to bind multiple events. The event names are separated by spaces. For example:

$ ('A'). bind ('click mouseover', function (){

In the latest jquery1.4 version, the bind method is improved. You can pass in a JSON-like object in the bind method to bind multiple event handlers at a time.

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

In a function, you can also pass a javaScript pair to the function method. This event object can be omitted.
There is also a parameter data in bind, which is rarely used in general. It is usually well handled to process the same variable in the same method.

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

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

Because the variable productname is assigned a value again, the output messages are all "neckextensions". For details, refer to the JavaScript variable scope. To solve this problem, you must use the data parameter,

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

2. One
Bind a one-time event handler function for a specific event (such as click) Matching Element. This method is the same as the parameter of the bind method. The difference between this method and the bind method is that it only processes the event matching the element once. After the method is executed, it will no longer be executed, of course, when you initiate a web request again, it will execute it again.

$ ('A'). one ('click', function (){
Alert ('A ');
})

After you click element a on the page, a message is displayed. If you initiate a second request, clicking element a again does not bring up the message dialog box.

3. live
This method is mainly used to process dynamically added elements, and bind events to those added elements.

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

Then, if I add an element,

$ ('Body'). appnend ('another element ');

This element will also be triggered by the event processing function alert.
In addition, jQuery provides some simple ways to bind these standard event types, such as. click () for simplifying. bind ('click ').

There are a total of 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.