Detailed explanation of the steps to dynamically add click events in jquery-JS Tutorial-php.cn

Detailed explanation of the steps to dynamically add click events in jquery

php中世界最好的语言

Release： 2018-05-25 13:36:15

Original

2084 people have browsed it

This time I will bring you a detailed explanation of the steps for dynamically adding click events to jquery. What are the precautions for jquery to dynamically add click events? Here is a practical case. Let’s take a look. .

When we try to bind some events to DOM elements, we usually use the following four methods
bind(),on(),live( ), delegate()The first two methods should be used more often. The following is my understanding of the four methods:

Bind(): .bind() is the most direct binding method, which will bind the specified function and Events are transferred to the DOM. This method solves the browser compatibility problem in Event processing, but this method still has some problems. Code:

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

Copy after login

The above two lines of code accomplish the same task, which is to add the event handler to all matching a elements. There are some efficiency issues here. On the one hand, we add click events to all a tags. This process is expensive; on the other hand, it is also a waste during execution, because they all do The same thing is executed many times (we can hook them to their parent elements, distinguish each of them by bubbling, and then execute the event handle).
Advantages

This method provides a compatibility solution for event handling between various browsers
Very convenient binding events to elements
.click(), .hover()...These very convenient time bindings are all bind A simplified processing method
is very good for elements selected by ID. Not only can it be hooked quickly (the page can only have one ID), but when the event When it occurs, the handler can be executed immediately (equivalent to the later live, delegate) implementation method

Disadvantages

It will bind events to all filtered elements
It will not bind events to those elements that are dynamically added after it completes execution
When there are many filtered elements, efficiency problems may occur.
Bind() can only be performed when the page is loaded, so efficiency problems may occur.

.live()
.live() method uses the concept of event delegation to handle event binding. It is the same as using .bind() to bind events. The .live() method will bind the corresponding event to the root element of the element you selected, which is the document element. Then all events that bubble up can be handled by this same handler. Its processing mechanism is like this. Once the event bubbles to the document, jQuery will look for the selector/event metadata and then decide which handler should be called. However, it seems to have been deleted in the latest jquery version.

$( "#members li a" ).live( "click", function( e ) {} );

Copy after login

Advantages:

#There is only one event binding here, which is bound to the document instead of .bind(). All elements are bound one by one
Those dynamically added elemtns can still trigger events that were bound earlier, because the actual binding of the event is on the document
You can bind the required events before the document is ready

Disadvantages:

# #It has been deprecated since 1.7, so you have to start phasing it out too.
Chaining is not supported correctly
It is useless when using event.stopPropagation() because it has to reach the document
Because all selectors/events are bound to documents,
so when we use the matchSelector method to select which event is called, it will be very slow
When the element where the event occurs is very deep in your DOM tree, there will be performance problems

.Delegate()
.delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.推荐使用.delegate() 代替.live()

$( "#members" ).delegate( "li a", "click", function( e ) {} );

Copy after login

优点：

你可以选择你把这个事件放到那个元素上了 chaining被正确的支持了
jQuery仍然需要迭代查找所有的selector/eventdata来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。
可以用在动态添加的元素上

缺点：

需要查找那个那个元素上发生了那个事件了，尽管比document少很多了，不过，你还是得浪费时间来查找。

.On()
其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的，这是1.8.2的源码：

$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} ); 
// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

Copy after login

优点：