学习中，有时遇到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指向谁？的更多相关文章

  1. event.target 和 event.currentTarget 的区别

    event.target This property of event objects is the object the event was dispatched on. It is differe ...

  2. 小结event.target与this

    <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <t ...

  3. event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素

    event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素

  4. 【前端】event.target 和 event.currentTarget 的区别

    event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...

  5. event.srcElement与event.target的区别

    window.event.srcElement与window.event.target 都是指向触发事件的元素,它是什么就有什么样的属性 srcElement是事件初始化目标html元素对象引用,因为 ...

  6. Event.target和Event.currentTarget的区别

    <style> * { margin:0; padding:0; list-style:none; } #ul { width:400px; height:250px; margin:0 ...

  7. window.event.srcElement与window.event.target 触发事件的元素 触发事件对象的获取，window.event与时间函数参数的event是同一个 事件对象

    判断事件触发的元素:     var tag = window.event.target || window.event.srcElement;    if (tag.tagName.toLowerC ...

  8. event.currentTarget与event.target的差别介绍

    event.currentTarget与event.target的差别想大家在使用的时候不是非常在意.本文以測试代码来解说它门之间的不同.即,event.currentTarget指向事件所绑定的元素 ...

  9. window.event.srcElement与window.event.target 触发事件的元素

    IE浏览器支持window.event.srcElement , 而firefox支持window.event.target:<input type="text" onblu ...

随机推荐

  1. socketserver服务器

    ''' 网络编程 Socket(TCP,IP)套接字 服务端 运行起来, 客户端 客户端 客户端 客户端 服务端: import socket sk = socket.socket() #绑定端口号 ...

  2. python 获取脚本所在目录

    平时写python经常会想获得脚本所在的目录,例如有个文件跟脚本文件放在一个相对的目录位置,那就可以通过脚本文件的目录找到对应的文件,即使以后脚本文件移到其他地方,脚本也基本不需要改动(相对于写死目录 ...

  3. 【JavaScript】固定布局轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. eclipse 字体、背景、自动提示设置

    1 字体设置 点击最上面菜单栏的“Window”---“preferences”弹出属性界面 General---  Appearance---Colors and Fronts,找到Java 选择“ ...

  5. Mysql数据库的一些命令_LInux

    查看当前数据库的版本,因为有些命令在不同版本中 用法有可能不一样,注意 -V 是大写字母V[root@localhost ~]# mysqladmin -Vmysqladmin  Ver 8.42 D ...

  6. 进程间通信--pipe

    管道的两种局限性: 历史上,他们是半双工的(即数据只能够在一个方向上流动). 现在某些系统也提供全双工管道,但是为了最佳的移植性,我们决不应该预先假定系统使用此特性 他们只能够在具有公共祖先的进程间使 ...

  7. Informatica - Powercenter 英文版资料（转载）

    Informatica - Powercenter 英文版资料 http://gerardnico.com/wiki/powercenter/powercenter

  8. 详解Android中AsyncTask的使用

    在Android中实现异步任务机制有两种方式,Handler和AsyncTask. Handler模式需要为每一个任务创建一个新的线程,任务完成后通过Handler实例向UI线程发送消息,完成界面的更 ...

  9. java数据结构_笔记(4)_图

    图一.概念.图: 是一种复杂的非线性数据结构.图的二元组定义: 图 G 由两个集合 V 和 E 组成,记为:G=(V, E)  其中: V 是顶点的有穷非空集合,E 是 V 中顶点偶对(称为边)的有穷 ...

  10. CMT learning

    一个 GMT 命令由"gmt + 模块 + 选项 + 参数"构成,写成如下形式: gmt module -Axx+bxxxx -Bxx+axxxx • gmt 是 GMT 中&qu ...