jquery Event Bindings (Bind (), Live (), delegate (), on ())

1. Bind ()

Description: Binds an event handler for an element.

. Bind () A basic usage:

$ (selector). bind (' click ', Function () {  alert (' User clicked on ' foo. ');});

can be directly replaced with the native JS:

$ (selector). Click (function () {  alert (' User clicked on ' foo. ');});

In jQuery1.4.3, you can now replace an event handler by passing false instead. This will be equivalent to an event handler binding written like this: function () {return false;}. This function is removed later by calling. Unbind (EventName, false).

For details, please refer to: http://www.css88.com/jqapi-1.9/bind/

2. Live ()

Description: Attach an event handler to all elements that match the current selector, now and in the future.

The. Live () method is simple; The following is a template of three event-adding methods, which are equivalent:

$ (selector). Live (events, data, handler);                JQuery 1.3+$ (document). Delegate (selector, events, data, handler);  JQuery 1.4.3+$ (document). On (events, selector, data, handler);        JQuery 1.7+

The events parameter can be a space-delimited list of event type names and optional namespaces, or event name strings and handlers for objects. The data parameter is optional and can be omitted. For example, the following three method invocation methods are functionally identical (the latter also provides a more efficient, better-performing way to add agent event handling):

$ ("a.b"). Live ("Click", Function () {alert ("goodbye!");});                JQuery 1.3+$ (document). Delegate ("A.offsite", "click", Function () {alert ("goodbye!");});  JQuery 1.4.3+$ (document). On ("click", "A.offsite", function () {alert ("goodbye!");});        JQuery 1.7+

The. Live () method is no longer recommended for use. In particular, use the following issues that occur with. Live ():
Before invoking the. Live () method, JQuery gets the elements that match the specified selector, which is time-consuming for large documents.
Chained notation is not supported. For example, $ ("a"). Find (". Offsite,. external"). Live (...); Such a writing is illegal and does not work as expected.
Since all the. Live () events are added to the document element, they may be triggered by the longest and slowest path before the event is processed.
On mobile IOS (IPhone, IPad and IPod Touch), for most elements, the click event does not bubble to the body of the document and cannot be used with the. Live () method if one of the following conditions is not met:
Use native clickable elements, such as a or button, because these two elements can bubble to document.
The elements within the document.body are bound using. On () or. Delegate (), because mobile IOS only bubbles within the body.
The CSS style cursor:pointer (or the parent element contains document.documentelement) that requires the click to bubble to an element to apply. However, it is important to note that this disables the copy/paste feature on the element and, when clicked on an element, causes the element to be highlighted.
It is inefficient to call Event.stoppropagation () in event handling to prevent event processing from being added to the node following document. Because the event has been propagated to the document.
The interaction of the. Live () method with other event methods can be surprising. For example, $ (document). Unbind ("click") removes all the click events that were added through. Live ()!
For pages that are still using the. Live (), the following differences in the different versions of the method may help you:
Before JQuery 1.7, you must return False in event handling if you want to prevent events that are bound by. Live () from bubbling to other elements. Calling. Stoppropagation () is not working.
Starting with JQuery 1.4, the. Live () method supports custom events and also supports all JavaScript event bubbling. It also supports events that could not have been bubbling, including change, submit, focus, and Blur.
In JQuery 1.3.x, only the following JavaScript events can be bound: Click, DblClick, KeyDown, KeyPress, KeyUp, MouseDown, MouseMove, Mouseout, mouseover , and MouseUp.

For details, please refer to: http://www.css88.com/jqapi-1.9/live/

Example:
Example: When you click a paragraph, another paragraph is added. Note that. Live () binds events for all paragraphs, including newly generated paragraphs.

$ ("a"). Live ("Click", Function () {return false;})

Example:Only the default actions are canceled by using the Preventdefault method.

$ ("a"). Live ("Click", Function (event) {  event.preventdefault ();});

Example:Use. Live () to bind the custom event.

$ ("P"). Live ("Mycustomevent", Function (E, myName, myvalue) {  $ (this). Text ("Hi there!");  $ ("span"). Stop (). CSS ("opacity", 1)           . Text ("MyName =" + myName). FadeIn (+).           FadeOut (1000);}); $ ("button"). Click (function () {  $ ("P"). Trigger ("Mycustomevent");});

Example:Use a map to bind multiple event handlers. Note that. Live () binds all paragraphs (including newly generated paragraphs) to the click, MouseOver, and mouseout events.

$ ("P"). Live ({  click:function () {    $ (this). After ("<p>another paragraph!</p>");  Mouseover:function () {    $ (this). addclass (' over ');  },  mouseout:function () {    $ (this). Removeclass ("over");  });

3, delegate ()
Description: Binds one or more event handlers for all matching selectors (selector parameters), based on a subset of the specified root elements, including those elements that are currently matched, and those that may be matched in the future.

These are the equivalent methods of the two methods:

jquery 1.4.3+$ (elements). Delegate (selector, events, data, handler);//jquery 1.7+$ (elements). On (Events, selector , data, handler);

For example, the following. Delegate () Code:

$ ("table"). Delegate ("TD", "click", Function () {  $ (this). Toggleclass ("Chosen");});

starting with jquery 1.7,. Delegate () has been replaced by the. On () method

is equivalent to the following code that uses. On ():

$ ("table"). On ("Click", "TD", function () {  $ (this). Toggleclass ("Chosen");});

To remove an event that uses the delegate () binding, . Undelegate ()Method.

Give examples directly:

<script type= "Text/javascript" >$ (document). Ready (function () {$ ("P"). Delegate ("DragStart", function () {$ (this ). Append ("<span> occurred DragStart event </span>");}); $ ("#btn"). Click (function () {$ ("P"). Undelegate ("DragStart");}); </script>

For details, please refer to: http://www.css88.com/jqapi-1.9/delegate/

4. On ()

The JQuery on () method is an officially recommended way to bind events.

$ (selector). On (Event,childselector,data,function,map)

Directly on the example: Tip:If you need to remove the method that is bound on (), you can use the off () method to process it.

$ (document). Ready (function () {$ ("P"). On ("click", Function () {$ (this). CSS ("Background-color", "pink");　　});　　$ ("button"). Click (function () {$ ("P"). Off ("click"); });});

Tip: If your event only needs one operation at a time, you can use the one () method

$ (document). Ready (function () {$ ("P"). The One ("click", Function () {$ (this). Animate ({fontSize: "+=6px"}); });});

For details, please refer to: http://www.cnblogs.com/leejersey/p/3545372.html