JS target与currentTarget区别说明

1. 
   
2. <div id="outer" style="background:#099">
   
3. click outer
   
4. <p id="inner" style="background:#9C0">click inner</p>
   
5. <br>
   
6. </div>
   
7. 
   
8. <script type="text/javascript">
   
9. function G(id){
   
10. return document.getElementById(id);
    
11. }
    
12. function addEvent(obj, ev, handler){
    
13. if(window.attachEvent){
    
14. obj.attachEvent("on" + ev, handler);
    
15. }else if(window.addEventListener){
    
16. obj.addEventListener(ev, handler, false);
    
17. }
    
18. }
    
19. function test(e){
    
20. alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
    
21. }
    
22. var outer = G("outer");
    
23. var inner = G("inner");
    
24. //addEvent(inner, "click", test);
    
25. addEvent(outer, "click", test);
    
26. </script>

复制代码

上面的示例中，当在outer上点击时，e.target与e.currentTarget是一样的，都是div；当在inner上点击时，e.target是p，而e.currentTarget则是div。