Event delegate code analysis in jquery

What is event delegation in jquery?

There is a very important concept in jquery-event assignment. I believe many people engaged in front-end development have heard that Qixiao is not very familiar with this, but after a good expert's advice, this feature is quite powerful. I will share it with you today.

The definition of event delegation is to bind the event originally added to the child element to the parent element, that is, to delegate the event to the parent element.

It is a bit abstract. According to the convention, the following is an example:

The code is as follows:	Copy code
<Ul class = "list"> <Li> 1, 11111 <li> <Li> 1, 222222 <li> <Li> 1, 3333 <li> <Li> 1, 4444 <li> </Ul>

This is a ul, which contains four li resources. If you want to add a click event to li, some content will pop up, which is generally written as follows:

$ ('. List li'). click (function (){
Alert (1111 );
})

In this way, when we click any li in the list, '123456' is displayed, but there are two drawbacks:

1. It is very resource-consuming, because this method adds events to each li. If there are few li resources, it will be okay. If there are many li resources, it will be very resource-consuming.

2. If li is added dynamically in the later stage, this pop-up event will not be available.

To solve the above problems, we can use event delegation to solve the problem. We can write such a piece of code:

The code is as follows:	Copy code
$ (". List"). delegate ("li", "click", function (){ Alert (1111 ); });

This is the event delegate of jquery. Sometimes it can be used very well. Come on!

. Live () is similar to the popular liveQuery plug-in, but there are several major differences:
*. Live currently only supports a subset of all events. For the list of supported events, see the preceding description.
*. Live does not support callback functions in the "No event" style provided by liveQuery .. Live can only be bound to event handlers.
*. Live does not have "setup" or "cleanup" processes. Because all events are delegate rather than directly bound to elements.

HTML code:

The code is as follows:	Copy code
<P> Click me! </P> $ ("P"). live ("click", function (){ $ (This). after ("<p> Another paragraph! </P> "); });

Events are assigned to multiple events at a time.

Bind multiple events at a time and assign corresponding operations according to the event category
To better optimize the above code, you can modify the code through event Delegation. The modified code is as follows:

The code is as follows:

Copy code

JQuery (function ($ ){ Var $ liveTip = $ ('<div id = "livetip"> </div>'). hide (). appendTo ('body '); Var tipTitle = ''; $ ('# Mytable'). bind ('mouseover mouseout mousemove', function (event ){ Var $ link = events (event.tar get). closest ('A '); If (! $ Link. length) {return ;} Var link = $ link [0]; If (event. type = 'mouseover' | event. type = 'mousemove '){ Export livetip.css ({ Top: event. pageY + 12, Left: event. pageX + 12 }); }; If (event. type = 'mouseover '){ TipTitle = link. title; Link. title = ''; Export livetip.html ('<div>' + tipTitle + '</div> <div>' + link. href + '</div> ') . Show (); }; If (event. type = 'mouseout '){ $ LiveTip. hide (); If (tipTitle ){ Link. title = tipTitle; }; }; }); });

In this section of code, multiple events are bound to a DOM object to be processed at a time, and different processing codes are delegated by judging the event category within the code. This avoids repeated code definitions to avoid time redundancy.

Event delegation and transfer

When a column in the list is clicked, the new column is added to the list. If you want the newly added columns to have the same event control, you can use event delegate to pass the event handling method to the new column.

The code is as follows:

Copy code

$ (Document). ready (function (){ $ ('# List2'). click (function (event) {// Note: the parameter "event" is added here. Var $ newLi = $ ('<li class = "special"> <button> New button </button> </li> '); Var $ tgt = events (event.tar get); // Note: the target function is used here. If ($ tgt. is ('Button ')){ $ Tgt. parent (). after ($ newLi ); } // Used here. The is () function is used to determine the attribute of the currently clicked element. If it is a button, an event is triggered. }); });