Detailed explanation of jQuery event binding on(), bind() and delegate() methods

Detailed explanation of jQuery event binding on(), bind() and delegate() methods_jquery

WBOY

Release： 2016-05-16 15:56:58

Original

1137 people have browsed it

I have been studying js for a while. In the process of learning, I found that when binding events in jQuery, some people use bind(), some use on(), some use delegate(), and some use live(). When I looked at the code, I felt that the functions had been implemented, so I passed it by. However, I still didn’t fully understand the difference between them, so I checked the information today and made a summary myself.

The reason why there are so many types of binding methods is because the version of jQuery is updated. For example, the on() method appeared after 1.7.

On the jQuery event binding api page, it is mentioned 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 various types of event binding.

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
  <button id="btn">添加新的p元素</button>
  <p>第一个p元素</p>
  <p>第二个p元素</p>
  <p>第三个p元素</p>
  <p>第四个p元素</p>
  <p>第五个p元素</p>
</div>

<script>
$("#btn").click(function(){
  $("div").append("<p>这是一个新的p元素</p>");
});
</script>

</body>
</html>

Copy after login

A simple page with a div, several p elements and a button inside the div. Click the button to add p elements. Next we will bind the click event to the p element on the page.

bind()

Usage

Copy code The 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 to pop up its content. Binding is simple and fast, but there are two problems here:
The first question is that the implicit iteration method is used here. If there are too many matched elements, for example, if I put 50 p elements in a div, I will have to perform binding 50 times. For a large number of elements, performance is affected.
But if it is an id selector, because the id is unique, it is very fast to use the bind() method.
The second problem is that elements that do not yet exist cannot be bound. Clicking the button on the page will dynamically add a p element. If you click on this p element, you will find that there is no action response.
These two problems can be solved using the delegate method.

In addition, there is an abbreviation for the bind() method. The above code can also be replaced with:

Copy code The code is as follows:

$("div p").click(function () {

alert($(this).text());

})

delegate()

Usage

Copy code The code is as follows:

$("div").delegate("p", "click", function () {

alert($(this).text());

});

This approach uses the concept of event delegation. Instead of binding events directly to the p element, bind events to its parent element (or ancestor elements as well). When you click on any element within the div, the event will bubble up from the event target layer by layer until it reaches The element to which you bind the event, such as the div element in this example. During the bubbling process, if the event's currentTarget matches the selector, the code will be executed.

This solves the above two problems of using the bind() method. There is no need to bind events to p elements one by one. You can also bind dynamically added p elements. Even if you bind an event to a document, you don't have to wait for the document to be ready to perform the binding.

In this way, binding is easy, but problems may also occur when calling. If the event target is very deep in the DOM tree, bubbling up layer by layer to find elements that match the selector will affect performance.

on()

on() actually unifies the previous binding event methods. Looking at the uncompressed source code of jQuery (the version I am looking at here is 1.11.3), you can find that both bind() and delegate() are actually What is achieved through the on() method is just that the parameters are different.

Copy code 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 above example, on() can be used for binding as follows:

Copy code The code is as follows:

$("div").on("click","p",function(){

alert($(this).text());

})

Official documentation suggestion:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

Try to use on() to bind events.

Remove event

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

Copy code 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 binding as above, you can also remove all event bindings without passing in parameters. I will not list them one by one here. The official documentation of jQuery is very detailed.

Summary

1. When there are many elements matched by the selector, do not use bind() to iteratively bind

2. When using the id selector, you can use bind()

3. When you need to bind dynamically added elements, use delegate() or on()

4. Use delegate() and on() methods, and the DOM tree should not be too deep

5. Try to use on()

The above is the entire content of this article, I hope you all like it.