Method of Js/jquery Event binding

The usual practice is to assign a function pointer to a DOM object, for example:

The code is as follows	Copy Code
function loadprocess () { Do something } Window.onload = loadprocess; Or Window.onload = function () { Do something }

Because this method can have an overlay problem, this method may cause the above code not to be executed because the Window object onload event binding event is also used elsewhere. It is a good practice to bind events through attachevent (for IE) or AddEventListener. For example, you can define the following functions:

The code is as follows	Copy Code
function bindevent (obj, event, func) { if (Obj.addeventlistener) { Obj.addeventlistener (Event, func, false); else if (obj.attachevent) { Obj.attachevent ("On" + Event, func); } }

The Calling method is:

The code is as follows	Copy Code
function loadprocess () { Do something } Bindevent (window, ' Load ', loadprocess); or using anonymous functions. Bindevent (window, ' Load ', function () { Do something });

Note: The value of the event parameter does not require ' on ' and is executed if the same object has been bound more than once for the same event

described above is the JS event binding, I will introduce the jquery event binding

There are three ways to bind events in jquery: Take the Click event as an example

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

(2) Target.bind ("Click", Function () {});

(3) target.live ("Click", Function () {});

The first method is very good understanding, in fact, and ordinary JS usage is similar, just one less on

The second to third method is the binding event, but the two are very different, the following highlights, because this if the use of the framework of jquery is very much, especially to pay attention to the difference between the two.

"The difference between bind and live"

Live method is actually a variant of the Bind method, its basic function is the same as the function of the Bind method, is to bind an event for an element, but the bind method can only give the current existing element binding events, for the subsequent use of JS, such as the new generated element is invalid, While the live method compensates for this flaw in the bind method, it can also bind the corresponding events to the resulting elements. So how is this feature of the live method implemented? Here's how to implement the principle.

The reason why the live method can bind the corresponding events to the later generated elements is attributed to the "event delegate", which means that events bound on ancestor elements can be used on their descendant elements. The processing mechanism of the live method is to bind the event to the root node of the DOM tree rather than to bind directly to an element. Give an example to illustrate:

$ (". ClickMe"). Live ("click", FN);

$ ("Body"). Append ("<div class= ' ClickMe ' > Test live Method Steps </div>");

When we click on this new element, the following steps occur in sequence:

(1) Generate a click event, passed to the div to do the processing

(2) Since no events are directly bound to the Div, the event bubbles directly onto the DOM tree

(3) event bubbling until the root node of the DOM tree, by default, the Click event is bound on the root node

(4) Perform a live-bound click event

(5) Detects whether the object that binds the event exists, and whether the bound event needs to be continued. The detection event object is detected by the

$ (event.target). Closest ('. ClickMe ') can find a matching element to implement.

(6) Pass (5) The test, if the object that binds the event exists, executes the bound event.

Because the live method only detects the existence of the object that binds the event when the event occurs, the live method can implement the new element and bind the event later. In contrast, bind determines whether an element of a bound event exists at the binding stage, and only binds to the current element, not to the parent node.

According to the analysis above, the benefits of live are really great, so why use the Bind method? The reason jquery retains the bind method instead of using the live method instead of bind is because live is not a complete replacement for 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, jQuery1.3,

Keyup,mousedown, MouseMove, Mouseout, MouseOver, and MouseUp. In the jquery 1.4.1, the focus and blue are even supported

Events (mapped to more appropriate and bubbling focusin and focusout). In addition, in the jquery 1.4.1, you can also support hover (mapping

To "MouseEnter MouseLeave").

(2) Live () does not fully support elements found by means of the DOM traversal. Instead, it should always be used directly behind a selector. Live ()

Method.

(3) When an element uses the live method to bind the event, if you want to prevent the event from passing or bubbling, you must return False in the function, just tune

Using Stoppropagation () is not possible to prevent the event from being passed or bubbling