首页 > 代码库 > e.target与e.currentTarget的作用

e.target与e.currentTarget的作用

要说清楚这个东西,还不太好阐述呢,所以,先看看下面的代码:

 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style type="text/css" rel="stylesheet">  
  7.         #fa{  
  8.             width: 100%;  
  9.             height: 170px;  
  10.             padding: 20px 0px;  
  11.             background-color: cadetblue;  
  12.         }  
  13.         #son{  
  14.             width: 100%;  
  15.             height: 20px;  
  16.             padding: 30px 0px;  
  17.             background-color: black;  
  18.             color: white;  
  19.             text-align: center;  
  20.             cursor: pointer;  
  21.         }  
  22.     </style>  
  23. </head>  
  24. <body>  
  25. <div id="fa" onmousedown="getEventTrigger(event)">  
  26.     <id="son" onmousedown="getEventTrigger(event)">点我试试</p>  
  27. </div>  
  28. </body>  
  29. <script type="text/javascript">  
  30.     var fa = document.getElementById(‘fa‘);  
  31.     var son = document.getElementById(‘son‘);  
  32.   
  33.   
  34.     function getEventTrigger(event)  
  35.     {  
  36.         x=event.currentTarget;  
  37.         y=event.target;  
  38.         alert("currentTarget 指向: " + x.id + ", target指向:" + y.id);  
  39.     }  
  40. </script>  
  41. </html>  

 

起初我也不太明白这两个概念,不过将上述代码在浏览器上执行以后,结合事件捕获和事件冒泡的概念,e.target与e.currentTarget就不难理解了,我将上述代码执行的结果以截图的方式呈现出来,对比一下:

当我点击id为son的p元素时:

技术分享

第一次弹出的信息

 

技术分享

第二次弹出的信息

 

通过对比可以看出,当点击p元素时,执行的是p元素上绑定的事件,此时,事件监听的对象是p元素,目标也是p元素,即图一所

示,currentTarget为p元素,target也是p元素;当事件冒泡到它的父级id为fa的元素div,触发了绑定在div上的事件,而这时,事件监

听的对象是div,目标元素依然是p元素,对比图二的信息,也就是说,这时的currentTarget指向div,target依然指向p元素,由此我

们可以得出: 

e.currentTarget指的是注册了事件监听器的对象,而e.target指的是该对象里的子对象,也是触发这个事件的对象!这么说应该明白

了吧?

e.target与e.currentTarget的作用