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;
如果對本文有任何意見和建議，歡迎留言，有錯誤請指出，謝謝！！！