探討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>
vara = 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;
感謝閱讀，希望能幫助到大家！