今天看了jquery手册，发现jQuery的事件对象模块也有一个currentTarget，始终指向this。
所以结论是：原生的currentTarget与jQuery的currentTarget完全不是一回事。要重点区别对待。
2014-6-17
target与currentTarget的区别？
通俗易懂的说法：
比如说现在有A和B，
A.addChild(B)
A监听鼠标点击事件
那么当点击B时，target是B，currentTarget是A
也就是说，currentTarget始终是监听事件者，而target是事件的真正发出者
总结：
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。
结论：由于要兼容IE浏览器，所以一般都在冒泡阶段来处理事件，此时target和currentTarget有些情况下是不一样的。
第一个地方
function(e){
var target = e.target || e.srcElement;//兼容ie7,8
if(target){
zIndex = $(target).zIndex();
}
}
//往上追查调用处
enterprise.on(img,'click',enterprise.help.showHelp);IE7-8下使用$(target).zIndex();可以获取到
IE7-8下使用$(e.currentTarget).zIndex();获取不到，可能是IE下既没有target，也没有currentTarget
测试一把（当然在IE浏览器中）
<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>第二个地方：
$(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;
}
}
}使用$(arguments[2].currentTarget).zIndex();也能获取到
预计结论：后者是使用jquery绑定事件的，jQuery内部让currentTarget表示当前元素。类似于FF/Chrome下的target，和IE下的srcElement。
网上的例子：
<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>对象this、currentTarget和target
在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。来看下面的例子：
var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
alert(event.currentTarget === this); //ture
alert(event.target === this); //ture
};这个例子检测了currentTarget和target与this的值。由于click事件的目标是按钮，一次这三个值是相等的。如果事件处理程序存在于按钮的父节点中，那么这些值是不相同的。再看下面的例子：
document.body.onclick = function (event) {
alert(event.currentTarget === document.body); //ture
alert(this === document.body); //ture
alert(event.target === document.getElementById("myBtn")); //ture
};当单击这个例子中的按钮时，this和currentTarget都等于document.body，因为事件处理程序是注册到这个元素的。然而，target元素却等于按钮元素，以为它是click事件真正的目标。由于按钮上并没有注册事件处理程序，结果click事件就冒泡到了document.body，在那里事件才得到了处理。
在需要通过一个函数处理多个事件时，可以使用type属性。例如：
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;
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
