探讨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;
感谢阅读，希望能帮助到大家！
