The difference between target and Currenttarget (jQueryUI way to get Z-index)

ZCCST Original: http://zccst.iteye.com/blog/2081412


2014-6-25
Looking at the jquery Handbook today, we found that the Event object module of jquery also has a currenttarget, which always points to this.
So the conclusion is that the original currenttarget and the currenttarget of jquery are not exactly the same thing. To focus on a differentiated treatment.



2014-6-17
What is the difference between target and currenttarget?

Plain and easy to say:
For example, there's A and B now,
A.addchild (B)
A monitor mouse click events
So when you click on B, Target is B,currenttarget is a
In other words, currenttarget is always the listener, and Target is the true issuer of the event.


Summarize:
Target in the phase of the event flow, the capture, the target, and the bubbling phase of the currenttarget. The two points are the same only when the event flow is at the target stage, and when in the capture and bubbling phase, target points to the object being clicked and Currenttarget to the object that is the current event activity (usually the parent).


Conclusion: Due to the compatibility of IE browser, it is generally in the bubbling phase to deal with events, when Target and currenttarget in some cases is not the same.


First place

Function (e) {    var target = E.target | | e.srcelement;//compatible ie7,8    if (target) {        ZIndex = $ (target). ZIndex ();}    } Go up and trace the call Place Enterprise.on (IMG, ' click ', Enterprise.help.showHelp);

　　

Ie7-8 use $ (target). ZIndex (); can get to
Ie7-8 using $ (e.currenttarget). ZIndex (); not available, probably under IE neither target nor currenttarget

Test a piece (of course in IE browser)

<inputtype= "button"ID= "BTN1"value= "I am the button" /><Scripttype= "Text/javascript">Btn1.attachevent ("onclick",function(e) {alert (e.currenttarget);//undefinedalert (e.target); //undefinedalert (e.srcelement); //[Object Htmlinputelement]    });</Script>

A second place:

$ (Element). On (' Click ', Jquery.proxy ( This, ' Countdownhandler ', This. Name, This. Namealert));functionCountdownhandler (name, Namealert) {var_this = This, ZIndex= 1999;//Gets the default value when Target is not reached    if(Arguments[2] && arguments[2].currenttarget && $ (arguments[2].currenttarget)) {ZIndex= $ (arguments[2].currenttarget). ZIndex (); if(zIndex) {ZIndex+ = 1; }Else{//Z-index value not obtainedZIndex = 1999; }    }}

Use $ (arguments[2].currenttarget). ZIndex (); can also get

Expected conclusion: the latter is the use of jquery binding events, and jquery internally lets currenttarget represent the current element. Similar to ff/chrome under the target, and IE under the srcelement.


examples on the Web:

HTML code

    <DivID= "outer"style= "background: #099">Click Outer<PID= "inner"style= "background: #9C0">Click Inner</P>          <BR>      </Div>            <Scripttype= "Text/javascript">      functionG (ID) {returndocument.getElementById (ID); }      functionaddevent (obj, Ev, handler) {if(window.attachevent) {obj.attachevent (" on" +ev, handler); }Else if(Window.addeventlistener) {obj.addeventlistener (EV, Handler,false); }      }      functionTest (E) {alert ("E.target.tagname:" +E.target.tagname+ "\ e.currenttarget.tagname:" +e.currenttarget.tagname); }      varouter=G ("outer"); varInner=G ("Inner"); //addevent (Inner, "click", test); Both are P tagsaddevent (outer,"Click", test); //conclusion: When clicked on Outer, E.target and E.currenttarget are the same, they are div; when clicked on Inner, E.target is P, and E.currenttarget is Div.     </Script>

object This, Currenttarget, and Target
Inside an event handler, the object this is always equal to the value of Currenttarget, and Target contains only the actual target of the event. If the event handler is assigned directly to the target element, the this, Currenttarget, and target contain the same values. Take a look at the following example:

JS Code

var btn = document.getElementById ("mybtn"function  (event) {    this // ture     This // ture};

This example detects the value of Currenttarget and target with this. Since the target of the Click event is a button, these three values are equal at a time. If the event handler exists in the parent node of the button, the values are not the same. Let's look at the following example:

JS Code

function (event) {    //ture    alert (this//ture    //  ture};

When you click the button in this example, this and currenttarget are equal to document.body, because the event handler is registered to this element. However, the target element is equal to the button element, assuming that it is the true target of the Click event. Because the event handler was not registered on the button, the Click event bubbled up to Document.body, where the event was processed.
You can use the Type property when you need to handle multiple events through a function. For example:

JS Code

varBTN = document.getElementById ("mybtn");varHandler =function(event) {Switch(event.type) { Case"Click": Alert ("Clicked");  Break;  Case"MouseOver": Event.target.style.backgroundColor= "Red";        Bread  Case"Mouseout": Event.target.style.backgroundColor= "";  Break; }};btn.onclick=Handler;btn.onmouseover=Handler;btn.onmouseout= handler;

The difference between target and Currenttarget (jQueryUI way to get Z-index)