JQuery event binding usage (with the difference between bind and live), jquerybind

JQuery event binding usage (with the difference between bind and live), jquerybind

This document describes how to bind jQuery events. We will share this with you for your reference. The details are as follows:

Html:

<a href="#" onclick="addBtn()">addBtn</a><div id="mDiv">  <button class="cBtn" onclick="alert(11111)">button1</button>  <button class="cBtn">button2</button>  <button class="cBtn">button3</button></div>

Javascript:

<Script type = "text/javascript"> function addBtn () {$ ('# mDiv '). append ('<button class = "cBtn"> button5 </button>')} jQuery (function ($) {// use on instead of live and delegate (live has been deprecated due to performance reasons and replaced by delegate ), the button added to the mDiv still has the Bound event $ ('# mDiv '). on ('click ','. cBtn ', function (index, eledom?{alert({(this}.html ()}); // calculate ()}) // note: /* 1. Whether bind, on, delegate, and click (function () are used, they are repeatedly bound. That is, events of the same type bound are put in an event queue and executed in sequence, events bound later will not replace those previously bound. If you use off for on, use undelegate for delegate and unbind for bind and click. For example, unbind (type) is passed as event type, if type is not passed, all events are bound. Note that the events inherent in the element cannot be unbind (such as button1). 2. Bind custom events, such as 'open ', the above functions can be used, but the trigger must be used for activation. Conclusion: We recommend that you use the on function. The binding format is $ ('. myclass '). on ({click: function (eleDom ){... do someting ...}, dbclick: function (eleDom ){... do someting ...}....}) * //} </script>

Notes:

Bind (type, [data], fn) binds an event handler function to a specific event of each matching element.
Copy codeThe Code is as follows: $ ("a"). bind ("click", function () {alert ("OK ");});
Live (type, [data], fn) attaches an event handler function to all matching elements, even if the element is added later
Copy codeThe Code is as follows: $ ("a"). live ("click", function () {alert ("OK ");});
Delegate (selector, [type], [data], fn) adds one or more event handlers to the specified Element (child element of the selected element, and specify the function to run when these events occur
Copy codeThe Code is as follows: $ ("# container"). delegate ("a", "click", function () {alert ("OK ");})
On (events, [selector], [data], fn) binds one or more event handlers to the selected element.

Differences:

. Bind () is directly bound to the element

. Live () is bound to the element by means of bubbling. More suitable for the list type, bind to the document DOM node. And. bind () support dynamic data.

. Delegate () is a more precise small range of event proxy, with better performance than. live ()

. On () is the latest version 1.9 that integrates the previous three methods of binding new events.

Supplement: differences between bind and live

There are three ways to bind events in jQuery: Taking the click event as an Example

(1) target. click (function (){});

(2) target. bind ("click", function (){});

(3) target. live ("click", function (){});

The first method is easy to understand. In fact, it is similar to the common JS usage, but it is just missing an on

The second and third methods both bind events, but the two are quite different. The following describes the differences, because jQuery's framework is used in many ways, pay special attention to the differences between the two.

[Difference between bind and live]

The live method is actually a variant of the bind method. Its basic functions are the same as those of the bind method. They all bind an event to an element, however, the bind method can only bind events to existing elements. It is invalid for elements generated by using JS and other methods afterwards, while the live method just makes up for this defect of the bind method, it can bind the generated elements to corresponding events. So how does the live Method Implement this feature? The following describes how it works.

The reason why the live method can bind the generated elements to the corresponding events is that the "event Delegate, the so-called "event Delegate" means that events bound to the ancestor element can be used on its child element. The processing mechanism of the live method is to bind the event to the root node of the DOM tree, instead of directly binding the event to an element. Here is an example:

$ (". ClickMe "). live ("click", fn); $ ("body "). append ("<div class = 'clickme'> steps for testing the live method </div> ");

When we click this new element, the following steps are taken in sequence:

(1) generate a click event and pass it to div for processing.

(2) because no event is directly bound to the div, the event is directly bubbling to the DOM tree.

(3) events are continuously bubbling until the root node of the DOM tree binds the click event to the root node by default.

(4) execute the click Event bound by live.

(5) check whether the Bound event object exists and determine whether to continue binding events. The event object is detected
Copy codeThe Code is as follows: whether condition (event.tar get). closest ('. clickMe') can find matching elements for implementation.

(6) through the (5) test, if the Bound event object exists, the bound event will be executed.

The live method checks whether the Bound event object exists only when an event occurs. Therefore, the live method can bind events to new elements or events. In contrast, the bind determines whether the element of the binding event exists in the event binding phase, and only binds the current element instead of the parent node.

According to the above analysis, the benefits of live are really great. Why should we use the bind method? The reason why jQuery should retain the bind method instead of using the live method to replace bind is that live cannot completely replace bind in some cases. The main differences are as follows:

(1) The bind method can bind any JavaScript event, while the live method only supports click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, and mouseover in jQuery1.3, and mouseup. in jQuery 1.4.1, the focus and blue events are even supported (ing to focusin and focusout that are more appropriate and can be bubbling ). In addition, hover (mapped to "mouseenter mouseleave") is also supported in jQuery 1.4.1 ").

(2) live () does not fully support elements found through DOM traversal. Instead, the. live () method should always be used directly after a selector.

(3) When an element binds an event using the live method, if you want to prevent the event from being transmitted or bubbling, you must return false in the function and only call stopPropagation () it is impossible to prevent the passing or bubbling of events.