jquery event binding on (), bind () and delegate () methods

Reproduced in this article: Chew a period of time of the JS related, learn the process found in jquery binding event, someone with bind (), someone with on (), someone with delegate (), and someone with live (), see the code when the realization of the function is also overturned, Just have not fully understand the difference between, so today checked the next information, make a summary of their own.

There are so many types of binding methods because the reason for the version update of jquery, such as the On () method, occurs after 1.7.

The jquery Event binding API page mentions that the live () method is obsolete and is not recommended for use. So here we mainly look at the following three methods: Bind (), delegate (), on ()

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

A simple page, placed a div,div inside a number of P elements and a button, click the button can append P element. We will bind the click event to the P element on the page below.
Bind ()
Usage
Copy CodeThe code is as follows:
$ ("div p"). Bind ("click", Function () {
Alert (This). text ());
})
This binds the Click event to the P element in all div and responds with the popup content. Binding is simple and fast, but there are two problems:
First, the implicit iterative approach is used, and if the number of elements to be matched is particularly high, such as if I put 50 p elements in the Div, I have to perform a binding 50 times. For a large number of elements, performance is affected.
But if the ID selector, because the ID is unique, with the bind () method is very fast.
The second problem is that you cannot bind to an element that does not already exist. Click on the button on the page, will dynamically add a P element, click on this P element, you will find no action response.
These two problems can be solved by using the delegate method.
In addition, the bind () method also has a shorthand, the above code can also be replaced by:
The code is as follows:
$ ("div p"). Click (function () {
Alert (This). text ());
})
Delegate ()
Usage
Copy CodeThe code is as follows:
$ ("div"). Delegate ("P", "click", Function () {
Alert (This). text ());
});
This approach employs the concept of event delegation. Instead of binding the event directly for the P element, it binds the event to its parent element (or ancestor element), and when clicked on any element within the Div, the event bubbles up from the event target up to the element that you are binding the event to, such as the DIV element in the example. During bubbling, code is executed if the currenttarget of the event matches the selector.
This solves the above two problems with the bind () method, without having to bind the event to the P element, or binding the P element that is added dynamically. Even if you bind the event to a document, you do not have to wait for the document to be ready to execute the binding.
This way, binding is easy, but there may be problems when calling. If the event target is in a deep position in the DOM tree, this layer bubbles up to find the element that matches the selector, and it affects performance.
On ()
On () In fact, the previous binding event method is unified, see jquery uncompressed source code (I see the version is 1.11.3), you can find whether bind () or delegate () is actually implemented by the on () method, but the parameters are different.
The code is 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, you can use on () to bind as follows:
The code is as follows:

$ ("div"). On ("click", "P", function () {
Alert (This). text ());
})
Official documentation Recommendations:

As of JQuery 1.7, the. On () method was the preferred method for attaching event handlers to a document.
Use on () to bind the event as much as possible.
removing events
Corresponds to the bind (), delegate (), and on () binding methods, which remove events by:
The code is 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 as shown above, you can remove all event bindings without passing in parameters, which are not listed here, and the official jquery documentation is very detailed.
Summarize
1. The selector matches the elements more than a few, do not use bind () iteration binding
2. When using the ID selector, bind () can be used
3. You need to bind the dynamically added elements with delegate () or on ()
4. Using the delegate () and on () methods, the DOM tree is not too deep
5. Use on () as much as possible
The above mentioned is the whole content of this article, I hope you can like.
jquery event binding on (), bind () and delegate () methods