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 ...
随机推荐
- 根据序列图像聚焦区域获取深度 Shape From Focus
最为超新新新新鸟...我也不知道第一篇文章应该写什么..所以,把自己最近正在研究的东西报一下吧, 研究的东西其实也不算深奥,就是对一个图像序列中的每张图像进行检测,发现每张图片的聚焦清晰区域,找到这个 ...
- map 取值
1>可以取出Map中所有的键所在的Set集合:再通过Set的迭代器获取到每一个键,之后再用get();方法获得对应的值. public static void main(String[] arg ...
- Can't update: no tracked branch
git更新错误:Can't update: no tracked branch No tracked branch configured for branch master. To make your ...
- EasyUI之加载js文件顺序
在使用EasyUI时,需要引用EasyUI框架的js文件,要注意加载的顺序,jquery.min.js一定要第一个被加载.
- seleniu+python+chrome的调试
1.下载chrome,下载chrome driver,下载地址:http://code.google.com/p/chromedriver/downloads/list 2.安装chrome,默认路径 ...
- java发送http的get、post请求[转]
原文链接:http://www.cnblogs.com/zhuawang/archive/2012/12/08/2809380.html package wzh.Http; import java.i ...
- AngularJS时间轴指令
是基于ion.rangeSlider.js,主要代码如下: <link rel="stylesheet" type="text/css" href=&qu ...
- position窗口居中
position的四个属性值: relative absolute fixed static 下面分别讲述这四个属性. <div id="parent"> &l ...
- 小型资源管理器，IO操作，读取和写入文件和目录的常用操作
解决方案: 小总结: 用IO流,的file,DirectoryInfo的方法绑定Treeview控件上和删除,读取, 可以熟练掌握一下IO流 主页面: private void Form1_Load( ...
- angularjs的简单应用（一）
AngularJS是为了克服html在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. AngularJS使用了不同的方法,它尝试去 ...