event.target指向谁？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了event.target指向谁？相关的知识，希望对你有一定的参考价值。
学习中，有时遇到event.target，总是不明白为什么要用target，后来学习了下，大概了解了event.target到底指什么元素了，关于event和this的内容，下回再说：
先摆结论：event.target指向事件执行时鼠标所点击（假设是click事件）区域的那个元素。如果事件绑定的元素内部有子元素，那么event.target指向这个子元素，如果没有，event.target指向事件所绑定的元素。看代码：
<html> <head> <title>prac</title> <meta charset="utf-8"> <style type="text/css"> *{margin:0;padding:0;font-size: 20px;} #div1{background-color: lightblue;height: 300px;} #p1{background-color: red;height: 100px;} #p2{background-color: pink;height: 100px;} </style> <script type="text/javascript"> function getEventTrigger(event) { x=event.target; alert("event.target元素的id: " + x.id+"，事件类型:"+event.type); } </script> </head>
<body > <div id="div1" onmousedown="getEventTrigger(event)"> <p id="p1">我是p1</p> <p id="p2">我是p2</p> 父块div1剩下的部分 </div> </body>
</html>
如上图：给父块div1绑定mousedown事件，调用函数getEventTrigger,弹出event.target元素的id:和事件类型，div1里面加了两个子元素，p1和p2,剩下的是div1没有被覆盖的部分；
效果如下：当你在p1里按下鼠标时，弹出p1的id；p2里按下鼠标时，弹出p2的id；在div1里按下鼠标时，弹出的就是div1的id；
也就验证了上面的结论：event.target指向事件执行时鼠标所点击（假设是click事件）区域的那个元素。如果事件绑定的元素内部有子元素，那么event.target指向这个子元素，如果没有，event.target指向事件所绑定的元素。
后面再附个链接和w3school的解释，感觉解释的不清楚，不过案例是用他的代码改的，嘿嘿
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
http://www.w3school.com.cn/jsref/event_target.asp
以上是关于event.target指向谁？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 event.target.files[0].name 在我的代码中显示错误？
Event.target、Event.toElement 和 Event.srcElement 有啥区别？