Home > Article > Web Front-end > Detailed explanation of jQuery event binding on(), bind() and delegate() methods

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

高洛峰Original: 2017-01-04 10:06:02974browse

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. I just didn't fully understand the difference, 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>
<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>

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

$("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 very simple and fast, but there are two problems here:
The first problem is that the implicit iteration method is used here. If there are too many matched elements, for example, if I put 50 in a div p element, you 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.
Using the delegate method can solve these two problems.

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

$("div p").click(function () {
    alert($(this).text());
})

delegate()

Usage

$("div").delegate("p", "click", function () {
    alert($(this).text());
});

This method 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, and 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. Check the jQuery uncompressed source code (the version I am looking at here is 1.11.3). You can It is found that both bind() and delegate() are actually implemented through the on() method, but the parameters are different.

 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 the following binding:

$("div").on("click","p",function(){
    alert($(this).text());
})

Official document recommendation:

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. The methods for removing events are:

$( "div p" ).unbind( "click", handler );
$( "div" ).undelegate( "p", "click", handler );
$( "div" ).off( "click", "p", handler );

Except like In addition to removing the specified event bindings 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, dom tree Don’t go too deep

5. Try to use on()

The above is the entire content of this article, I hope everyone will like it.

For more detailed explanations of jQuery event binding on(), bind() and delegate() methods, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：In-depth understanding of the Function.prototype.bind() method in JSNext article：In-depth understanding of the Function.prototype.bind() method in JS

See more

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

Related articles