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 和 event.currentTarget 的区别
event.target This property of event objects is the object the event was dispatched on. It is differe ...
- 小结event.target与this
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素
event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素
- 【前端】event.target 和 event.currentTarget 的区别
event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...
- event.srcElement与event.target的区别
window.event.srcElement与window.event.target 都是指向触发事件的元素,它是什么就有什么样的属性 srcElement是事件初始化目标html元素对象引用,因为 ...
- Event.target和Event.currentTarget的区别
<style> * { margin:0; padding:0; list-style:none; } #ul { width:400px; height:250px; margin:0 ...
- window.event.srcElement与window.event.target 触发事件的元素 触发事件对象的获取，window.event与时间函数参数的event是同一个 事件对象
判断事件触发的元素: var tag = window.event.target || window.event.srcElement; if (tag.tagName.toLowerC ...
- event.currentTarget与event.target的差别介绍
event.currentTarget与event.target的差别想大家在使用的时候不是非常在意.本文以測试代码来解说它门之间的不同.即,event.currentTarget指向事件所绑定的元素 ...
- window.event.srcElement与window.event.target 触发事件的元素
IE浏览器支持window.event.srcElement , 而firefox支持window.event.target:<input type="text" onblu ...
随机推荐
- windows C input 注意
windows控制台输入,默认是以文本模式打开,即使重定向输入,文本模式不变,所以输入时无法读到cr,因为windows已经把crlf转换成单个lf. 如果freopen("CON" ...
- Phonegap中自定义插件的使用
在phonegap中需要实现特定相关的功能,可能需要自定义扩展一下功能,那么扩展phonegap组件就成为了可能. 源代码结构图: 本文目的在于讲述怎么扩展一个phonegap组件以及实现. 针对ph ...
- <button>标签与<input type="button">标签
<script type="text/javascript" src="/jquery-1.11.3.min.js"></script> ...
- hadoop运行原理之Job运行(五) 任务调度
接着上篇来说.hadoop首先调度辅助型task(job-cleanup task.task-cleanup task和job-setup task),这是由JobTracker来完成的:但对于计算型 ...
- 调整ESX的VMFS磁盘格式的块大小，让单个虚拟磁盘支持更大容量
调整ESX的VMFS磁盘格式的块大小,让单个虚拟磁盘支持更大容量 前因:客户搭建了VMware ESX企业版的测试平台:有一天接到一个需求,是测试数据库的,需要一个300G的磁盘. 解决过程: 1.按 ...
- HDU 1005 F(Contest #1)
题意: 已知f[1] = f[2] = 1,输入三个数a,b,n,求f[n] = (a*f[n-1]+b*f[n-2])%7的结果 分析: f[n-1]和f[n-2]最多为7种情况(0,1,2,3,4 ...
- win7下安装Sass和compass
由于项目需要我们使用到sass来编译css文件.本人在win7下开发 由于国内安装sass遇到了一些困难,后来不得不网查询,后来终于解决了,这里介绍一下 1.要安装sass环境必须要先安装rubyIn ...
- Permutations II 再分析
记得第一遍做这题的时候其实是没什么思路的,但是第二次的时候,我已经有"结果空间树"的概念了.这时候再看https://oj.leetcode.com/problems/permut ...
- javafx之登陆界面的跳转
界面布局用到的是fxml而非纯java代码,工具是javafx sence builder 账号:account 密码:password 登陆成功: 可以点击退出登陆返回到登陆页面 工程目录: pac ...
- POJ 题目2411 Mondriaan's Dream（状压DP）
Mondriaan's Dream Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 13519 Accepted: 787 ...