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

簡單的說,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

相關文章
相關標籤/搜索