Introduction to delegate and live in jQuery

The delegate and live methods are newly added in jQuery 1.4. Its role is event listening, but it can also be applied to the newly added DOM objects in jQuery objects:

<Script>
$ ("Body"). delegate ("p", "click", function (){
$ (This). after ("<p> Another paragraph! </P> ");
});
</Script>
The Running Effect of the demo above is to click a section P tag to add a p tag after the p tag. For the newly added p tag, you can also click Add a p tag, the new tag does not need to listen for its click event. The same is true for live:

$ ("P"). live ("click", function (){
$ (This). after ("<p> Another paragraph! </P> ");
});
How is this implemented? I tried it myself: First, you must understand the event bubble mechanism. In the following example, the click event is monitored on both the button and its container. According to the bubbling method, the click Event of the button is triggered first, and then the click Event of the container div is triggered.

Window. onload = function (){
Function handle (e ){
// Obtain the event object
// The first parameter of the standard DOM method event handler is the event object.
// IE can use the global variable window. event
Var evt = window. event? Window. event: e;

// Obtain the original event source of the trigger event
// The standard DOM method is to use target to obtain the current event source.
// IE uses evt. srcElement to obtain the event Source
Var target = evt.tar get | evt. srcElement;

// Obtain the event source being processed
// The standard DOM method is to use currentTarget to obtain the current event source.
// This in IE points to the event source currently processed
Var currentTarget = e? E. currentTarget: this;

// Question: in IE 9, the window. event and e have no currentTarget attribute for different evt, and e has the currentTarget attribute (as a standard browser practice ??)
Alert ("src id:" + target. id + "curent target id:" + currentTarget. id );

}
Document. getElementById ("btn"). onclick = handle;
Document. getElementById ("c"). onclick = handle;

} <Div id = "c" class = "">
<Input type = "button" id = "btn" name = "" value = "button"/>
</Div>
The problem is that the click event of container c is triggered by bubbles. You need to find the event Source button btn that actually triggers the event. The standard browser event provides the currentTarget attribute to obtain the original event source. Whether the standard browser IE6/7/8 can be accessed directly using this. In this way, the click Event of the div can obtain the event source that actually triggers the event.

// Ps: The above code found that e and the global variable window in IE 9 were found during debugging. the event is different. The e settings of IE 9 are completely based on the standard browser. Therefore, e also provides the currentTarget attribute. The following are my findings during debugging:

 

In fact, as long as you can get the original event source of the bubble, we can trigger the event of the newly added element by listening to the event of its parent container, and then trigger the event of the newly added element based on whether the original event is a new element. This is the so-called "proxy (delegate)", that is, listening to the events of the new elements of the proxy through the events of the container (not necessarily the parent container. The following uses a hyperlink to add a button and capture its events through event bubbling without listening to its events.

Window. onload = function (){
Function handle (e ){
// Obtain the event object
// The first parameter of the standard DOM method event handler is the event object.
// IE can use the global variable window. event
Var evt = window. event? Window. event: e;

// Obtain the original event source of the trigger event
// The standard DOM method is to use target to obtain the current event source.
// IE uses evt. srcElement to obtain the event Source
Var target = evt.tar get | evt. srcElement;

// Obtain the event source being processed
// The standard DOM method is to use currentTarget to obtain the current event source.
// This in IE points to the event source currently processed
Var currentTarget = e? E. currentTarget: this;

// Question: in IE 9, the window. event and e have no currentTarget attribute for different evt, and e has the currentTarget attribute (as a standard browser practice ??)
Alert ("src id:" + target. id + "curent target id:" + currentTarget. id );

If (target. id = "newbutton "){
Alert ("delegate Method for triggering new elements ");
}
}
Document. getElementById ("btn"). onclick = handle;
Document. getElementById ("c"). onclick = handle;

Document. getElementById ("btnadd"). onclick = function (){
Var btn = document. createElement ("input ");
Btn. setAttribute ("value", "click to try ");
Btn. setAttribute ("type", "button ");
Btn. setAttribute ("id", "newbutton ");
// No new listener