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 区别