JQuery Event Quest

Source: Internet
Author: User

How dynamic events are bound for DOM elements in JQuery events:

Bind an event to an element

$ (selector). bind (' EventName ', function () {});

Event names are separated by a single space when multiple events are bound at once

$ (selector). bind (' Click Dbclick mouseMove ', function () {});

Want the function to pass in data

$ (selector). bind (' EventName ', {"name": "Shavol"}, Function (e) {

alert (e.data.name);

});

Since JQuery version 1.7, the On () method is the preferred method of adding an event handler to the selected element.

Since JQuery version 1.7, the On () method is a new alternative to the Bind (), Live (), and Delegate () methods. This approach brings a lot of convenience to the API, and we recommend using this approach, which simplifies the JQuery code base.

Note: the event handlers added using the on () method apply to current and future elements (such as new elements created by the script).

Tip: If you want to remove an event handler, use the off () method.

tip: To add an event that runs only once and then remove it, use the one () method.

In addition to the BIND function, methods can also bind dynamic elements, that is, element events that are added using code

$ (selector). Live (' EventName ', [data], function () {});

Execute this event only once

$ (selector). One (' EventName ', [data], function () {});

Do not write in parentheses to remove all events that are bound by selector

$ (selector). Unbind ();

$ (selector). Delegate (' Element ', ' eventName ', function () {

function body;

});

Triggering events manually

$ (selector). Trigger (' eventName ');

Examples are as follows:

$ ("div"). Bind (' Change-color ', function () {

$ (this). CSS ("Color", "red");

});

$ ("div"). Trigger ("Change-color");

Trigger a custom Change-color event when the page loads

In JQuery 1.8. Versions previously used to bind multiple operations using the toggle () function

$ (selector). Toggle (function () {

}, function () {

}, function () {

},

...);

JQuery Event Quest

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.