Home > Developer > JavaScript
For details about how to bind jQuery events to on (), bind (), and delegate (), jquerydelegate
After a few days of js-related learning, some people use bind (), some use on (), some use delegate (), some people also use live (). When reading the code, they thought that all the functions were implemented, but they didn't fully understand the differences. So today, I checked the information and made a summary.
The reason why there are so many types of binding methods is that jQuery versions are updated. For example, the on () method will appear after 1.7.
On the jQuery event binding api page, the live () method is outdated and is not recommended. So here we mainly look at the following three methods: bind (), delegate (), on ()
We prepare an html page for testing various types of event binding.
<Html>A simple page contains a div, which contains several p elements and a button. You can click the button to append the p element. Next we will bind the click event to the p element on the page.
Bind ()
Usage
Copy codeThe Code is as follows:
$ ("Div p"). bind ("click", function (){
Alert ($ (this). text ());
})In this way, the click event is bound to all p elements in the div, and the response is the pop-up content. Binding is simple and quick, but there are two problems:
The first problem is that the implicit iteration method is used here. If there are many matching elements, for example, if I put 50 p elements in the div, you have to bind 50 times. For a large number of elements, performance is affected.
But if it is the id selector, because the id is unique, it is very quick to use the bind () method.
The second problem is that no existing elements can be bound. Click the button on the page to dynamically Add a p element. If you click this p element, no action response is displayed.
The delegate method can solve these two problems.In addition, the bind () method is also abbreviated, and the above Code can be changed:
Copy codeThe 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 method adopts the concept of event delegation. Instead of directly binding events to the p element, You can bind events to the parent element (or the ancestor element can also). When you click any element in the div, events will bubble up from the event target layer by layer until you bind the event element to it. In this example, the div element. If the currentTarget of the event matches the selector During the bubble process, the code is executed.
In this way, the above two problems of using the bind () method are solved. You do not need to bind events to the p element one by one, or you can bind the dynamically added p element. Even if you bind an event to a document, you can bind the event without waiting for the document to be ready.
In this way, binding is easy, but problems may also occur during calling. If the event target is very deep in the DOM tree, then the elements matching the selector are found in a layer-by-layer bubble, which affects the performance.
On ()
On () is actually to unify the previous bind event method, view the jQuery uncompressed source code (I see the version 1.11.3 here), you can find that no matter bind () or delegate () is actually implemented through the on () method, but the parameters are different.
Copy codeThe 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 above example, on () can be used as the following binding:
Copy codeThe Code is as follows:
$ ("Div"). on ("click", "p", function (){
Alert ($ (this). text ());
})Suggestions for official documents:
As of jQuery 1.7, the. on () method is the preferred method for attaching event handlers to a document.Use on () whenever possible to bind events.
Remove event
Corresponding to bind (), delegate (), and on () binding methods, the methods for removing events are:
Copy codeThe 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 binding as above, you can also remove all event bindings without passing in parameters. This is not listed here. jQuery's official documentation is very detailed.
Summary
1. When the selector matches many elements, do not use bind () for iterative binding.
2. When the id selector is used, bind () can be used ()
3. delegate () or on ()
4. Use the delegate () and on () methods. The dom tree should not be too deep.
5. Try to use on ()
The above is all the content of this article. I hope you will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
