Detailed explanation of the difference between target and currentTarget

2014-6-25

I read the jquery manual today and found that jQuery's event object module also has a currentTarget, which always points to this.

So the conclusion is: the native currentTarget and jQuery's currentTarget are completely different. We should focus on different treatment.

2014-6-17

What is the difference between target and currentTarget?

Easy to understand:

For example, there are A and B now,

A.addChild(B)

A listens to mouse click events

Then when B is clicked, the target is B and the currentTarget is A

That is to say, the currentTarget is always the one who listens to the event, and the target is the real sender of the event

Summary:

target is in the target stage of the event flow; currentTarget is in the capture, target and bubbling stages of the event flow. Only when the event flow is in the target stage, the two directions are the same. When it is in the capturing and bubbling stages, the target points to the clicked object and the currentTarget points to the object of the current event activity (usually the parent). class).

Conclusion: Due to the need to be compatible with IE browser, events are generally processed in the bubbling stage. At this time, the target and currentTarget are different in some cases.

The first place

function(e){
    var target = e.target || e.srcElement;//兼容ie7,8
    if(target){
        zIndex = $(target).zIndex();
    }
}

//往上追查调用处
enterprise.on(img,'click',enterprise.help.showHelp);

Use $(target).zIndex(); under IE7-8; you can get

Use $(e.currentTarget under IE7-8 ).zIndex(); cannot be obtained, it may be that there is neither target nor currentTarget under IE

Test it (of course in the IE browser)

<input type="button" id="btn1" value="我是按钮" />
<script type="text/javascript"> 
	btn1.attachEvent("onclick",function(e){
		alert(e.currentTarget);//undefined
		alert(e.target);       //undefined
		alert(e.srcElement);   //[object HTMLInputElement]
	});
</script>

Second Place:

$(element).on('click',jQuery.proxy(this, 'countdownHandler', this.name, this.nameAlert));
function countdownHandler(name, nameAlert){
    var _this = this,
    zIndex = 1999;//获取不到target时的默认值
    if(arguments[2] && arguments[2].currentTarget && $(arguments[2].currentTarget)){
        zIndex = $(arguments[2].currentTarget).zIndex();
        if(zIndex){
            zIndex += 1;
        }else{//获取不到z-index值
            zIndex = 1999;
        }
    }
}

Use $(arguments[2].currentTarget).zIndex(); you can also get

Estimated conclusion: The latter uses jquery to bind events , jQuery internally lets currentTarget represent the current element. Similar to target under FF/Chrome and srcElement under IE.

Online examples:

    <p id="outer" style="background:#099">  
        click outer  
        <p id="inner" style="background:#9C0">click inner</p>  
        <br>  
    </p>  
      
    <script type="text/javascript">  
    function G(id){  
        return document.getElementById(id);      
    }  
    function addEvent(obj, ev, handler){  
        if(window.attachEvent){  
            obj.attachEvent("on" + ev, handler);  
        }else if(window.addEventListener){   
            obj.addEventListener(ev, handler, false);  
        }  
    }  
    function test(e){  
        alert("e.target.tagName : " + e.target.tagName + "/n e.currentTarget.tagName : " + e.currentTarget.tagName);  
    }  
    var outer = G("outer");  
    var inner = G("inner");  
    //addEvent(inner, "click", test);  // 两者都是P标签
    addEvent(outer, "click", test);  //结论：当在outer上点击时，e.target与e.currentTarget是一样的，都是p；当在inner上点击时，e.target是p，而e.currentTarget则是p。
    </script>

Objects this, currentTarget and target

are handled in events Inside the program, the object this is always equal to the value of currentTarget, while target only contains the actual target of the event. If the event handler is assigned directly to the target element, this, currentTarget, and target contain the same values. Take a look at the following example:

var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
    alert(event.currentTarget === this); //ture
    alert(event.target === this); //ture
};

This example detects the values ​​of currentTarget, target and this. Since the target of the click event is the button, these three values ​​are equal at one time. If the event handler exists in the button's parent node, then these values ​​are not the same. Look at the following example again:

document.body.onclick = function (event) {
    alert(event.currentTarget === document.body); //ture
    alert(this === document.body); //ture
    alert(event.target === document.getElementById("myBtn")); //ture
};

When the button in this example is clicked, both 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, thinking that it is the real target of the click event. Since there is no event handler registered on the button, the click event bubbles up to document.body, where the event is handled.

When you need to handle multiple events through a function, you can use the type attribute. For example:

var btn = document.getElementById("myBtn");
var handler = 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 above is the detailed content of Detailed explanation of the difference between target and currentTarget. For more information, please follow other related articles on the PHP Chinese website!