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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.