Explain in detail how to use jQuery's three bind/One/Live event bindings

This article mainly introduces the three bind/One/Live event binding methods of jQuery. Friends who need it can come and refer to it. I hope it will be helpful to everyone

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(). These methods are introduced below. Usage:

1. bind/Unbind
In the jquery event model, there are two basic event binding functions, bind and unbind, The meaning of these two functions 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 number of bind is The meaning of a parameter is: event type (note that there is no need to add on), the code in the function is the logic code you want to execute
Multiple event binding: bind also allows you to bind multiple events, event names Separate them with spaces, for example:

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

In the latest jquery1. In version 4, the bind method has been improved. You can pass 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, which is rarely used. , usually in order 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 is reassigned, the output messages are "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 to a specific event (like click) for each 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 pops 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 be triggered event processing 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.

The above is the detailed content of Explain in detail how to use jQuery's three bind/One/Live event bindings. For more information, please follow other related articles on the PHP Chinese website!