event.target指向谁？

时间：2016-12-19 14:27:53 阅读：259 评论：0 收藏：0 [点我收藏+]

学习中，有时遇到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