jquery event bindings on (), bind () and delegate () methods are detailed _jquery

Chew a few days of JS related, learn the process found in the binding event in jquery, someone with bind (), someone with on (), someone with delegate (), and someone with live (), look at the code when they feel all realize the function has been overturned, Just have not fully understand the difference between, so today looked down the data, make a summary of their own.

There are so many types of binding methods that are due to the version update of jquery, as the On () method appears after 1.7.

jquery's Event Binding API page, mentions that the live () method is obsolete and is deprecated. So here's how we look at the following three methods: Bind (), delegate (), on ()

We prepare an HTML page for testing various types of event bindings.

A simple page, placed a div,div inside a number of P elements and a button, click the button to append the P element. We will bind the click event to the P element on the page below.

Bind ()

Usage

Copy Code code as follows:

$ ("div p"). Bind ("click", Function () {
Alert ($ (this). text ());
})

This binds the Click event to all the P elements in the Div, and the response is to eject its contents. Binding is simple and quick, but here are two questions:
The first problem here is an implicit iterative approach, if the matching element is particularly numerous, such as if I put 50 p elements in the Div, I have to perform the binding 50 times. For a large number of elements, performance is affected.
However, if it is an ID selector, the bind () method is quick because the ID is unique.
The second problem cannot be bound for elements that do not yet exist. Clicking on the button on the page will dynamically add a P element and click on the P element to find no action response.
The two problems can be solved by the delegate method.

In addition, the bind () method also has a shorthand, and the above code can also be replaced by:

Copy Code code as follows:

$ ("div p"). Click (function () {
Alert ($ (this). text ());
})

Delegate ()

Usage

Copy Code code as follows:

$ ("div"). Delegate ("P", "click", Function () {
Alert ($ (this). text ());
});

This approach employs the concept of event delegation. Instead of binding events directly for P elements, instead, the event is bound for its parent element (or ancestor element), and when clicked on any element within the Div, the event bubbles up from event target up until it reaches the element that you are binding the event to, such as the DIV element in the example. In the bubbling process, code is executed if the currenttarget of the event matches the selector.

This solves the above two problems with the bind () method, no longer binding events for P elements, or binding for dynamically added P elements. Even if you bind an event to a document, you can perform the binding without waiting for the document to be ready.

In this way, binding is easy, but there may also be problems with the call. If the event target is in a deep position in the DOM tree, such layers of bubbles bubble up to find elements that match the selector, affecting performance.

On ()

On () In fact, the previous binding event method was unified to see the jquery uncompressed source code (I see the version is 1.11.3), you can find that either bind () or delegate () is actually implemented through the On () method, but the parameters are different.

Copy Code code as follows:

Bind:function (types, data, fn) {
Return This.on (types, NULL, data, FN);
},
Unbind:function (types, fn) {
Return This.off (types, NULL, FN);
},
Delegate:function (selector, types, data, fn) {
Return This.on (types, selector, data, FN);
}
Undelegate:function (selector, types, fn) {
(namespace) or (selector, types [, FN])
return arguments.length = = 1? This.off (Selector, "* *"): This.off (types, selector | | "* *", FN);
}

In the example above, use on () can be binding as follows:

Copy Code code as follows:

$ ("div"). On ("click", "P", function () {
Alert ($ (this). text ());
})

Official documents suggest:

As of the JQuery 1.7, the. On () method was the preferred method for attaching event handlers to a document.

Use on () to bind events as much as possible.

removing events

corresponding to the bind (), delegate (), and on () binding methods, the methods for removing events are:

Copy Code code as follows:

$ ("div p"). Unbind ("click", Handler);
$ ("div"). Undelegate ("P", "click", Handler);
$ ("div"). Off ("click", "P", handler);

In addition to removing the specified event bindings like the above, you can remove all event bindings without passing in the parameters, which is not listed here, and the official jquery document is very detailed.

Summarize

1. The selector matches to the element more, do not use bind () iterative binding

2. With the ID selector, you can use BIND ()

3. Need to bind dynamically added elements with delegate () or on ()

4. Using the delegate () and on () method, the DOM tree is not too deep

5. Use on () as much as possible

The above mentioned is the entire content of this article, I hope you can enjoy.