Jquery event binding (bind (), live (), delegate (), on ())

1. bind ()

Description: binds an event handler to an element.

A basic usage of. bind:

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

You can directly use native js instead:

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

In jQuery1.4.3, you can now pass false to replace an event handler. This is equivalent to an event handler binding written as function () {return false ;}. In the future, you can call. unbind (eventName, false) to remove this function.

See http://www.css88.com/jqapi-1.9/bind/ for details

2. live ()

Description: attaches an event processor to all elements matching the current selector, current and future.

The. live () method is simple. The following are templates for three event addition 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 list of event type names separated by spaces, an optional namespace, or an event name string and a handler object. The data parameter is optional and can be omitted. For example, the following three methods are called in the same way in terms of functions (this article also provides a more effective and better performance way to add proxy event processing ):

$("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. In particular, the following problems occur when using. live:
Before calling the. live () method, jQuery gets the elements that match the specified selector, which is very time-consuming for large documents.
Chaining is not supported. For example, $ (""). find (". offsite ,. external "). live (...); this writing method is illegal and cannot work as expected.
Because all. live () events are added to the document element, they may be triggered only after the longest and slowest path before the event is processed.
On Mobile iOS (iPhone, iPad, and iPod Touch), for most elements, click events do not bubble to the document body. If one of the following conditions is not met, they cannot match. use the live () method together:
Use native clickable elements, such as a or button, because these two elements can bubble to the document.
The elements in document. body are bound with. on () or. delegate (), because mobile iOS can only bubble in the body.
The CSS style cursor: pointer (or the parent element contains document.doc umentElement) that can be applied only when you click and bubble to an element ). However, you must note that copying or pasting an element is prohibited. When you click an element, the element is highlighted.
It is inefficient to call event. stopPropagation () in event processing to prevent the event processing from being added to the node after the document. Because the event has been propagated to the document.
The interaction between the. live () method and other event methods is surprising. For example, $ (document). unbind ("click") removes all click events added through. live!
For pages that are still using. live (), the following differences about the method in different versions may be helpful to you:
Before jQuery 1.7, if you want to prevent events bound by. live () from being bubbling to other elements, you must return false in event processing. The call. stopPropagation () does not work.
Since jQuery 1.4, the. live () method supports custom events and all JavaScript events. It also supports events that cannot be 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.

See http://www.css88.com/jqapi-1.9/live/ for details

Example:
Example: When you click a paragraph, add another paragraph. Note that. live () binds events to all paragraphs (including new sections.

$("a").live("click", function() { return false; })

Example:Only the default action is canceled by using the preventDefault method.

$("a").live("click", function(event){  event.preventDefault();});

Example:Use. live () to bind a custom event.

$("p").live("myCustomEvent", function(e, myName, myValue) {  $(this).text("Hi there!");  $("span").stop().css("opacity", 1)           .text("myName = " + myName)           .fadeIn(30).fadeOut(1000);});$("button").click(function () {  $("p").trigger("myCustomEvent");});

Example:Bind multiple events using ing. Note that. live () binds click, mouseover, and mouseout events to all paragraphs (including newly generated paragraphs.

$("p").live({  click: function() {    $(this).after("
Another paragraph!
");  },  mouseover: function() {    $(this).addClass("over");  },  mouseout: function() {    $(this).removeClass("over");  }});

3. delegate ()
Description: binds one or more event handlers to all the elements matching the selector parameter. Based on the subset of a specified root element, matched elements include those that have already been matched, and those that may be matched in the future.

These are 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");});

Since jQuery 1.7,. delegate () has been replaced by the. on () method.

It is equivalent to the following code that uses. on:

$("table").on("click", "td", function() {  $(this).toggleClass("chosen");});

To remove events bound with delegate, . Undelegate ()Method.

For example:

<Script type = "text/javascript"> $ (document ). ready (function () {$ ("p "). delegate ("dragstart", function () {$ (this ). append ("dragstart event occurred") ;}$ ("# btn "). click (function () {$ ("p "). undelegate ("dragstart") ;}); </script>

See http://www.css88.com/jqapi-1.9/delegate/ for details

4. on ()

The jQuery on () method is officially recommended to bind events.

$(selector).on(event,childSelector,data,function,map)

Example: Tip:If you need to remove the method bound to on (), you can use the off () method for processing.

$(document).ready(function(){　　$("p").on("click",function(){　　　　$(this).css("background-color","pink");　　});　　$("button").click(function(){　　　　$("p").off("click");　　});});

Tip: If your event only requires one operation, you can use the one () method.

$(document).ready(function(){　　$("p").one("click",function(){　　　　$(this).animate({fontSize:"+=6px"});　　});});

See http://www.cnblogs.com/leejersey/p/3545372.html for details