Will JQuery's on() function bind events repeatedly?

JQuery is a popular JavaScript library that provides convenient DOM operations and event handling in front-end development. It is one of the essential tools in Web development. When using JQuery, we often use the event binding function on(). However, many developers often encounter a question: Will JQuery's on() function bind events repeatedly?

First, let us take a look at the definition and usage of the on() function:

$(selector).on(event, childSelector, data, function(){...})

Among them, selector is the element to which the event is bound, event is the bound event type, and childSelector is Declares the child element selector of the event delegate, data is the data passed to the event handler, and function is the bound event handler. The working principle of the

on() function is: when an event is triggered, the element matched by the selector will be processed by the corresponding event handler. The on() function adds the event handler to the selected element's event listener list.

So, what happens when we use the on() function multiple times to bind the same event type?

In fact, every time the on() function is called, the event handler of this event type will be added to the event listener list, even if the same event handler has already been bound. This means that if we use the on method multiple times to bind the same event, the same event handler will be repeatedly added to the event listener list.

For example, the following code will repeatedly bind the click event:

$(selector).on('click', function(){...});
$(selector).on('click', function(){...});
$(selector).on('click', function(){...});

In this way, every time the element is clicked, JQuery will execute the event handlers three times in the order of binding.

However, if we use the on() function to bind an event handler, then use the off() function again to unbind the event handler, and then use the on() function again to bind the event handler , this event handler will only be added once. Because when you use the off() function to unbind an event, JQuery will remove the event handler from the event listener list, and will re-add it when you use the on() function again.

So, we can avoid the problem of repeated binding of events by the on() function by using the off() function to unbind the event.

$(selector).on('click', function(){
   // code here;
   $(selector).off('click');//解绑click事件
   $(selector).on('click', function(){
     // do something
   });
});

In the above code, we use the off() function in the event handler to unbind the click event. Then, a new click event was rebinded in the event handler and the new event handler was added.

Of course, in addition to using the off() function to unbind the event to avoid the on() function repeatedly binding the event, we can also prevent repeated binding by determining whether the event already exists in the event listener list.

if(!$(selector).data('hasBind')){
  $(selector).data('hasBind', true).on('click', function(){
    // do something
  });
}

In the above code, we use the data() method to create a hasBind attribute on the element and set its initial value to false. Then, by judging the value of the hasBind attribute, if it is false, bind the event and set the value of the hasBind attribute to true, so that it will not be bound repeatedly in the future.

In summary, JQuery's on() method will repeatedly bind events, so we need to use the off() function to unbind the event, or prevent duplication by determining whether the event is already in the event listener list. Binding. This can better avoid the problem of repeated execution when binding events and improve the efficiency of front-end development.

The above is the detailed content of Will JQuery's on() function bind events repeatedly?. For more information, please follow other related articles on the PHP Chinese website!