How to bind three bind/One/live events of jquery

Source: Internet
Author: User
Tags variable scope

jquery is an excellent JavaScript framework. In the old version, it mainly uses the BIND () method, there are two types of one () and live () in the new version. The following describes how to use these methods:

1. bind/unbind
In jquery's event model, 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 (you do not need to add the on parameter ), the Code in function is the logic code you want to execute
bind multiple events: bind also allows you to bind multiple events, which 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 the function, you can pass a JavaScript pair to the function method, this event object can be omitted.
bind also has a parameter data, which is rarely used, it is usually well handled when processing the same variable in the same method.

var productname =" sports shoes ";
$ ('# Region '). BIND ('click', function () {
alert (productname);
});

productname =" neck.pdf ",
$ ('# Region '). BIND ('click', function () {
alert (productname);
});


the output message is" neckhistory "because the variable productname is assigned a value again. For more information, see the variable scope of JavaScript, 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
for each specific event that matches an element (like click) bind a one-time event processing function. 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 click element a again, the message dialog box is displayed.


3. live
This method can process dynamically added elements, the added elements are also bound to events.

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

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. click () is used 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.