e.target与e.currentTarget对比
复制以下代码，即可查看效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css" rel="stylesheet">
#father{
width: 200px;
height: 120px;
padding: 20px;
background-color: #ccc;
}
#son{
width: 100%;
height: 20px;
padding: 30px 0px;
background-color: #000;
color: white;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="father" onmousedown="getEventTrigger(event)">
<p id="son" onmousedown="getEventTrigger(event)">点击查看效果</p>
</div>
</body>
<script type="text/javascript">
var fa = document.getElementById('fa');
var son = document.getElementById('son');
function getEventTrigger(event)
{
x=event.currentTarget;
y=event.target;
alert("currentTarget 指向： " + x.id + "， target指向：" + y.id);
}
</script>
</html>
灰色为父盒子，黑色为子元素
点击子元素，弹出：
事件经过：点击子元素p标签，事件监听对象为p标签，目标元素也是p标签，所以e.target和e.currentTarget都是p标签
由于没有阻止事件冒泡，会在父元素上再次捕捉到事件，这时事件监听对象为父元素，目标是p标签，正如上图所示
由此给出定义
- e.currentTarget指的是注册了监听事件的对象
- e.target指的是触发事件的对象（父元素里的子元素）
e.target与e.currentTarget对比的更多相关文章
- 【前端】event.target 和 event.currentTarget 的区别
event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...
- event.target 和 event.currentTarget 的区别
event.target This property of event objects is the object the event was dispatched on. It is differe ...
- Event对象中的target属性和currentTarget属性的区别
先上结论: Event.target:触发事件的元素: Event.currentTarget:事件绑定的元素: 通过下面的例子来理解这两个属性的区别: 使用Event.target属性的例子:(我在 ...
- JavaScript Event Delegation, and event.target vs. event.currentTarget
原文:https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currentta ...
- e.target与e.currentTarget的区别
在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两者的区别,因此有必要把这两个属性好好梳理一下,加深理解,以便日后的查询. MDN中对t ...
- e.target与e.currentTarget的区别，事件冒泡与事件捕获 ，事件委托
e.target与e.currentTarget的区别:https://www.jianshu.com/p/1dd668ccc97a 事件冒泡与事件捕获 :https://www.jianshu.co ...
- 【小程序】获取到的e.target与e.currentTarget区别
[小程序]获取到的e.target与e.currentTarget区别:https://blog.csdn.net/qq_33744228/article/details/80310294 使用e.t ...
- 小程序获取自定义属性之e.target与e.currentTarget
彻底弄懂小程序e.target与e.currentTarget 一.小程序中关于事件对象 e 的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上 ...
- 彻底弄懂小程序e.target与e.currentTarget
一.小程序中关于事件对象 e 的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上的解释是: target:事件源组件对象 currentTarg ...
随机推荐
- 使用gtest自动化测试并给出性能测试结果（windows 版本，版本平台也可以使用，但并没有做完整的测试）
/************************************************************* *使用gtest自动化测试 * ********************* ...
- rpm安装、卸载、升级、查询和验证
RPM 的全称为Redhat Package Manager ,是由Redhat 公司提出的,用于管理Linux 下软件包的软件.Linux 安装时,除了几个核心模块以外,其余几乎所有的模块均通过RP ...
- Java 并发工具包 java.util.concurrent 用户指南（转）
本文转自http://blog.csdn.net/defonds/article/details/44021605/ 感谢作者 1. java.util.concurrent - Java 并发工具包 ...
- andriod绘制图形
使用view画图,有两个重要的组件需要介绍: (1)Paint 可以理解为画刷或者画笔,去主要用来设置绘图使用的颜色.填充方式.透明度.字体以及字体样式等. (2)Canvas 画布,在view上显示 ...
- UVa1347 Tour
/*----UVa1347 ---首相两边方向走不方便,可以看做:两个人同时从最左边出发,沿着两条不同路径走到终点,除了起点和中点外 其他点恰好被走过一遍 ---用dp[i][j]表示1-max(i, ...
- win10安装nodejs
https://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html 1 去官网下载对应版本的msi文件 2安装,path会自动设置 3 检验 ...
- hibernate中对象的3种状态：瞬时态(Transient)、 持久态(Persistent)、脱管态(Detached)
Hibernate的对象有3种状态,分别为:瞬时态(Transient). 持久态(Persistent).脱管态(Detached). 处于持久态的对象也称为PO(Persistence Objec ...
- sql中用JOIN USING 简化JOIN ON
Mysql 中联接SQL语句中,ON子句的语法格式为:table1.column_name = table2.column_name. 当模式设计对联接表的列采用了相同的命名样式时,就可以使用 USI ...
- hive on spark VS SparkSQL VS hive on tez
http://blog.csdn.net/wtq1993/article/details/52435563 http://blog.csdn.net/yeruby/article/details/51 ...
- 计算机速度GHz等于每秒多少次
这个是没有对比关系的.需要看处理器的微指令.计算机的GHz指的是CPU的时钟频率,不同的指令需要的时钟个数是不同的,列如,从内存读一个数据,一般需要4个时钟周期,而进行一次8位数的加法运算,一般需要1 ...