What is the difference between jquery on bind

JQuery has provided on() and off() since version 1.7+ to bind and cancel event processing functions. These two APIs have many similarities with the bind() and unbind() originally provided by JQuery, but also have some differences. For a detailed introduction to bind and unbind, please refer to this article.

The function signatures of on() and bind() are as follows:

1. bind(type, [data], fn)  
     
   on(type,[selector],[data],fn)

You can see that the difference between the two functions is: whether the selector parameter value is supported. Due to the event bubbling feature of JavaScript, if we register an event handler on the parent element, when the event occurs on the child element, the event handler on the parent element will also be triggered. If you do not set the selector when using on, then there will be no difference between on and bind.

1. <p id="parent">  
       <input type="button" value="a" id="a"/>  
       <input type="button" value="b" id="b"/>  
   </p>

In the above code, if we use bind() to bind the click event handler to the parent, When the a or b button is clicked, the event processing function will be executed. If we want to trigger when a is clicked but not when b is clicked, then we can use on, the code is as follows

1. $("#parent").on("click","#a",function(){  
       alert($(this).attr("id"));  
   });

You can see: The parameter selector of the on() function is to allow the parent element to filter out events that occur on the child elements when the event bubbles up. If bind is used, then there is no such ability, and events that occur on the child element will definitely trigger the parent element event.

There is another point to note: the event processing function bound to on can also be used for new elements added in the future, and has the same effect as delegate, but bind does not.

The above is the detailed content of What is the difference between jquery on bind. For more information, please follow other related articles on the PHP Chinese website!