JavaScript target 與 currentTarget 區別 JS 事件：target 與 currentTarget 區別

target 在事件流的目標階段；currentTarget 在事件流的捕獲，目標及冒泡階段。只有當事件流處在目標階段的時候，兩個的指向纔是同樣的， 而當處於捕獲和冒泡階段的時候，target 指向被單擊的對象而 currentTarget 指向當前事件活動的對象（通常爲父級）。

 

<div id="outer" style="background:#099"> click outer <p id="inner" style="background:#9C0">click inner</p>  
        <br>  
    </div>  
      
    <script type="text/javascript">  
    function G(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 = G("outer"); var inner = G("inner"); //addEvent(inner, "click", test); 
    addEvent(outer, "click", test); </script>

 

上面的示例中，當在 outer 上點擊時，e.target 與 e.currentTarget 是同樣的，都是 div；當在 inner 上點擊時，e.target 是 p，而 e.currentTarget 則是 div。

 

參考：JS 事件：target 與 currentTarget 區別