target与currentTarget两者既有区别，也有联系，那么我们就来探讨下他们的区别吧，一个通俗易懂的例子解释一下两者的区别：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Example</title> 5 </head> 6 <body> 7 <div id="A"> 8 <div id="B"> 9 </div> 10 </div> 11 </body> 12 </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有些情况下是不一样的。
如：
1 function(e){ 2 var target = e.target || e.srcElement;//兼容ie7,8 3 if(target){ 4 zIndex = $(target).zIndex(); 5 } 6 } 7 8 //往上追查调用处 9 enterprise.on(img,'click',enterprise.help.showHelp);
IE7-8下使用$(target).zIndex();可以获取到
IE7-8下使用$(e.currentTarget).zIndex();获取不到，可能是IE下既没有target，也没有currentTarget
再来证实一下猜测，在IE浏览器下运行以下代码：
1 <input type="button" id="btn1" value="我是按钮" /> 2 <script type="text/javascript"> 3 btn1.attachEvent("onclick",function(e){ 4 alert(e.currentTarget);//undefined 5 alert(e.target); //undefined 6 alert(e.srcElement); //[object HTMLInputElement] 7 }); 8 </script>
对象this、currentTarget和target
在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。来看下面的例子：
1 var btn = document.getElementById("myBtn"); 2 btn.onclick = function (event) { 3 alert(event.currentTarget === this); //ture 4 alert(event.target === this); //ture 5 };
这个例子检测了currentTarget和target与this的值。由于click事件的目标是按钮，一次这三个值是相等的。如果事件处理程序存在于按钮的父节点中，那么这些值是不相同的。再看下面的例子：
1 document.body.onclick = function (event) { 2 alert(event.currentTarget === document.body); //ture 3 alert(this === document.body); //ture 4 alert(event.target === document.getElementById("myBtn")); //ture 5 };
当单击这个例子中的按钮时，this和currentTarget都等于document.body，因为事件处理程序是注册到这个元素的。然而，target元素却等于按钮元素，以为它是click事件真正的目标。由于按钮上并没有注册事件处理程序，结果click事件就冒泡到了document.body，在那里事件才得到了处理。
在需要通过一个函数处理多个事件时，可以使用type属性。例如：
1 var btn = document.getElementById("myBtn"); 2 var handler = function (event) { 3 switch (event.type) { 4 case "click": 5 alert("Clicked"); 6 break; 7 case "mouseover": 8 event.target.style.backgroundColor = "red"; 9 bread; 10 case "mouseout": 11 event.target.style.backgroundColor = ""; 12 break; 13 } 14 }; 15 btn.onclick = handler; 16 btn.onmouseover = handler; 17 btn.onmouseout = handler;
如果对本文有任何意见和建议，欢迎留言，有错误请指出，谢谢！！！