淺析e.target與e.currentTarget的區別

簡單的說，e.curretnTarge是指注冊了事件監聽器的對象，e.target是指對象里的子對象，實際觸發這個事件的對象。

在《JavaScript高級高級程序設計》中，對這2個屬性說明如下：

屬性/方法	類型	讀/寫	說明
target	Element	只讀	事件的目標
currentTarget	Element	只讀	其事件處理程序當前正在處理事件的那個元素

我們通過一個簡單的例子來說明：

<div id="outer" style="background:#099"> click outer 
<p id="inner" style="background:#9C0">click inner</p> 
</div>

　　

function $(id){
    return document.getElementById(id);
  }
  function addEvent(obj, ev, handler){
    if(window.attachEvent){
      obj.attachEvent("on" + ev, handler);
    }else if(window.addEventListener){
      obj.addEventListener(ev, handler, false);
    }
  }
  function test(e){
    alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
  }
  var outer = $("outer");
  var inner = $("inner");
  addEvent(inner, "click", test);
  addEvent(outer, "click", test);

　　在outer上點擊時，target跟currentTarget是一樣的，都是div，而在inner上點擊時，e.target是p、e.currentTarget是div。

　　目前，我也對這2個屬性似懂非懂，通過翻閱資料才對其有了個初步的認識。