Analyze the three bind/One/Live event binding methods of jQuery_jquery

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(). The following introduces the use of these methods:

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

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

The first parameter of bind represents: event type (note that there is no need to add on), the code in function is the logic code you want to execute
Multiple event binding: bind also allows you to bind To specify multiple events, separate event names with spaces, for example:

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

In the latest jquery1.4 version, the bind method has been improved. You can pass in a JSON-like object in the bind method to bind multiple event processing functions at one time.

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

In the function function, you can also pass a javaScript object to the function method. This event object can usually be omitted.
There is also a parameter data in bind. This parameter is rarely used in general. It is usually used to solve the problem of processing 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);
});

Since the variable productname has been reassigned, the output messages are all "necklace". If you don't understand here, you can check the variable scope of JavaScript. To solve this problem, you must use the data parameter,

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

2. One
Bind a one-time event handler function for each specific event (like click) of the matching element. This method has the same parameters as the bind method. The difference from the bind method is that the event processing of the matching element is only executed once. After execution, it will never be executed again. Of course, it will be executed again when the web request is reinitiated.

$('a').one('click',function(){
alert('a');
})

After clicking the a element on the page, a message will pop up. Unless the user initiates a second request, clicking the a element again will not pop up the message dialog box.

3. live
This method can mainly handle dynamically added elements, and also bind events to those elements added later.

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

Then if I add an element,

$('body').appnend('Another Element');

Then the element will also trigger the event handler function alert.
In addition, jQuery also provides some simple ways to bind these standard event types, such as .click() to simplify .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.