探讨e.target与e.currentTarget

target与currentTarget两者既有区别，也有联系，那么我们就来探讨下他们的区别吧，一个通俗易懂的例子解释一下两者的区别：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <div id="A">
        <div id="B">
        </div>
    </div>
</body>
</html>

var a = document.getElementById('A'),
      b = document.getElementById('B');    
function handler (e) {
    console.log(e.target);
    console.log(e.currentTarget);
}
a.addEventListener('click', handler, false);

当点击A时：输出：

1 <div id="A">...<div>

2 <div id="A">...<div>

当点击B时：输出：

1 <div id="B"></div>

2 <div id="A">...</div>

也就是说，currentTarget始终是监听事件者，而target是事件的真正发出者。

由于要兼容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>

对象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;

感谢阅读，希望能帮助到大家！

探讨e.target与e.currentTarget

猜你喜欢