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 ...
随机推荐
- elasticsearch5.3.0 安装
公司有项目打算用elasticsearch,所以研究了下,目前最新版本5.3.0 安装 1.下载包 https://artifacts.elastic.co/downloads/elasticsea ...
- 查看tomcat启动文件都干点啥---server对象
在上一章查看tomcat启动文件都干点啥---Catalina.java中说道了构造Server,,这次尝试着说一下Tomcat中Server的内容,首先看一下org.apache.catalina. ...
- 蛋疼的VS2010 tab group
http://superuser.com/questions/232031/why-does-my-visual-studio-2010-default-to-a-horizontal-windows ...
- hdu4001
参考博客http://www.cppblog.com/aswmtjdsj/archive/2011/09/04/155049.aspx 维护4根双扫描线,左右和上下.暴力枚举,复杂度O(n^2). # ...
- 学习一些和redux一样作用的mobx知识
两个组件:mobx和mobx-react 英文文档:https://mobx.js.org/refguide/object.html 中文文档:https://cn.mobx.js.org/ 样例:h ...
- 百度地图 Android SDK - 标注（Marker）的基本使用
标注(Marker)是开发人员最常使用的地图覆盖物志一.今天就来向大家介绍一些标注(Marker)的最基本用法! 实现目标: 1.构建基础地图页面: 2.在地图的中心点处加入 Marker: 3.实现 ...
- java 中文转Unicode 以及 Unicode转中文
package com.sun; public class Snippet { public static void main(String[] args) { String cn ...
- 9.11排序与查找（一）——给定两个排序后的数组A和B，当中A的末端有足够的缓冲空间容纳B。将B合并入A并排序
/** * 功能:给定两个排序后的数组A和B,当中A的末端有足够的缓冲空间容纳B.将B合并入A并排序. */ /** * 问题:假设将元素插入数组A的前端,就必须将原有的元素向后移动,以腾出空间. ...
- Sending SMS And Dialing Numbers without User Consent(Context is not needed)
Sending SMS And Dialing Numbers without User Consent Sending SMS does not require context or user in ...
- android中非堵塞socket通信
1.什么是同步与异步,堵塞与非堵塞 首先我们要明确搞明确:同步就等于堵塞?异步就等于非堵塞?这是不正确的,同步不等于阻 塞.而异步也不等于非堵塞. 1)那什么是同步编程? 什么是同步,就是在发出一个功 ...