e.target与e.currentTarget的作用

古城微笑少年丶 2021-09-15 12:06 306阅读 0赞

转载：https://blog.csdn.net/magic\_\_man/article/details/51781425

event.target 返回触发事件的元素   
event.currentTarget 返回绑定事件的元素

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

\[html\]  [view plain][]   [copy][view plain]

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.     **<****p** 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元素时：

![Center][]

第一次弹出的信息

![Center 1][]

第二次弹出的信息

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

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

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

们可以得出：

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

了吧？

[view plain]: https://blog.csdn.net/magic__man/article/details/51781425#
[Center]: /images/20210813/d48c3c421b8d4ad3900491026d6bd5f3.png
[Center 1]: /images/20210813/91a0d3a7aefc4c6b82ae0dadde0e417c.png