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 ...
随机推荐
- 可持久化线段树（主席树）（图文并茂详解）【poj2104】【区间第k大】
[pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=63740442 向大(hei)佬(e)实力学(di ...
- Redis(二)linux下redis安装
上篇讲解了redis在windows下的安装,接下来看看在linux下如何安装redis(纯菜鸟入门级别)? (1)redis的下载及编译 这里,首先进入存放文件目录(我的云服务器的是:cd /jel ...
- linux下打包，压缩，解压缩
Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的.生成tar包后,就可以用其它的程序来进 行压缩了,所以首先就来讲讲ta ...
- sqlserver中常用的四个选项(NOCOUNT/ANSI_NULLS/QUOTED_IDENTIFIER/ XACT_ABORT)
1 NOCOUNT选项 当 SET NOCOUNT 为 ON 时,不返回计数.当 SET NOCOUNT 为 OFF 时,返回计数. eg: if object_id(N'table_test',N' ...
- 认识多渲染目标(Multiple Render Targets)技术【转】
http://www.cnblogs.com/hellohuan/archive/2008/12/01/1345359.html 首先,渲染到纹理是D3D中的一项高级技术.一方面,它很简单,另一方面它 ...
- Gentoo:startx出现Failed to load module问题
安装完xorg-server后,startx启动桌面环境,出现缺少模块错误. 查看log: cat /var/log/Xorg.0.log | grep EE [75.403] (EE) Failed ...
- 自己动手写android图片异步载入库
尊重他人劳动成果,转载请说明出处:http://blog.csdn.net/bingospunky/article/details/44344085 接触android有半年了.关于图片异步载入.一直 ...
- EffectiveJava（1） 构造器和静态工厂方法
构造器和静态工厂方法 **构造器是大家创建类时的构造方法,即使不显式声明,它也会在类内部隐式声明,使我们可以通过类名New一个实例. 静态方法是构造器的另一种表现形式** 主题要点:何时以及如何创建对 ...
- POJ 2029 Get Many Persimmon Trees （二维树状数组）
Get Many Persimmon Trees Time Limit:1000MS Memory Limit:30000KB 64bit IO Format:%I64d & %I ...
- jmap命令(Java Memory Map)的使用
jmap的使用能够參考: 官方文档 http://docs.oracle.com/javase/6/docs/technotes/tools/share/jmap.html 和这篇博客 http:// ...