欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

详解target与currentTarget的区别

程序员文章站 2022-04-01 22:25:11
...
2014-6-25

今天看了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;

以上就是详解target与currentTarget的区别的详细内容,更多请关注其它相关文章!