簡單的說,e.curretnTarge是指註冊了事件監聽器的對象,e.target是指對象裏的子對象,實際觸發這個事件的對象。javascript
在《JavaScript高級高級程序設計》中,對這2個屬性說明以下:html
屬性/方法 | 類型 | 讀/寫 | 說明 |
target | Element | 只讀 | 事件的目標 |
currentTarget | Element | 只讀 | 其事件處理程序當前正在處理事件的那個元素 |
咱們經過一個簡單的例子來講明:java
<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個屬性似懂非懂,經過翻閱資料纔對其有了個初步的認識。htm