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 ...
随机推荐
- oracle数据库表空间追加数据库文件方法
oracle数据库表空间追加数据库文件方法 针对非大文件方式表空间,允许追加文件进行表空间的扩展,单个文件最大大小是32G 第一种方式:表空间增加数据文件 www.2cto.com 1 ...
- JSTL跳出<c:forEach>循环
<c:forEach items="${consultPager.dataList }" var="consult"> <tr> < ...
- node模块系统常用命令
node模块系统常用命令 命令 示例 备注 安装模块 npm install commander 最新版本 npm install commander@1.0.0 指定版本 npm install c ...
- 用wget下载整个目录
wget -c -r -np -P files www.test.com/dir/src -c 断点续传 -r 递归下载 -np 不下载父附录 -nd 不建立目录,若无此选项,将按照网站目录结构创建目 ...
- Also unsere eigene Christian Louboutin Webshop bietet die überragende Christian Louboutin Schuhe uk schiebt zusammen mit kostengünstigen Wert
www.heelschuhe.de, Es ist wirklich eine der Frauen erfordern immer interessant und auch Louboutin Pu ...
- 杭电ACM1000
#include <stdio.h> int main() { int a,b; while(scanf("%d%d",&a,&b)!=EOF) { p ...
- IP地址及其子网划分
说实话,弄到子网划分的时候还是及其头晕的,又是这又是那的,现在我们来讲解一下这些东西, 首先我们来介绍一下IP地址,要弄清子网划分,子网掩码首先还是要弄清IP地址的划分 IP地址是给Internet上 ...
- mysql 查询优化
不说话,先贴代码 public PageResult<BoTmcRaw> getLargeList(BaseCondition baseCondition) { PageResult< ...
- 去除 UINavigationController.navigationBar下方的横线
self.navigationController.navigationBar.clipsToBounds=YES;
- Oracle开窗函数 over()（转）
copy文链接:http://blog.csdn.net/yjjm1990/article/details/7524167#,http://www.2cto.com/database/201402/2 ...