复制以下代码,即可查看效果

<!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对比的更多相关文章

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

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

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

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

  3. Event对象中的target属性和currentTarget属性的区别

    先上结论: Event.target:触发事件的元素: Event.currentTarget:事件绑定的元素: 通过下面的例子来理解这两个属性的区别: 使用Event.target属性的例子:(我在 ...

  4. JavaScript Event Delegation, and event.target vs. event.currentTarget

    原文:https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currentta ...

  5. e.target与e.currentTarget的区别

    在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两者的区别,因此有必要把这两个属性好好梳理一下,加深理解,以便日后的查询. MDN中对t ...

  6. e.target与e.currentTarget的区别,事件冒泡与事件捕获 ,事件委托

    e.target与e.currentTarget的区别:https://www.jianshu.com/p/1dd668ccc97a 事件冒泡与事件捕获 :https://www.jianshu.co ...

  7. 【小程序】获取到的e.target与e.currentTarget区别

    [小程序]获取到的e.target与e.currentTarget区别:https://blog.csdn.net/qq_33744228/article/details/80310294 使用e.t ...

  8. 小程序获取自定义属性之e.target与e.currentTarget

    彻底弄懂小程序e.target与e.currentTarget 一.小程序中关于事件对象  e  的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上 ...

  9. 彻底弄懂小程序e.target与e.currentTarget

    一.小程序中关于事件对象  e  的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上的解释是: target:事件源组件对象 currentTarg ...

随机推荐

  1. Nginx的server为0.0.0.0/0.0.0.1的作用?

    看到kong默认的代理和后台server 都是0.0.0.0,代理到上游的服务器proxy_pass $upstream_scheme://kong_upstream;配置如下, upstream k ...

  2. 用swift开发自己的MacOS锁屏软件(一)

    最近看到了NearLock这款软件,感觉还是很不错的,当我兴致勃勃的安装了体验之后,发现效果和自己所想的差太多了,所以,便想着自己写一个吧. 刚开始当然是查资料之类的,不查不知道,一查吓一跳,国内基本 ...

  3. c#ppt练习

    第六章 1.从控制台输入一个数,如果这个数大于等于60,就输出”及格”,否则输出”不及格” 从控制台输入一串字符,如果这个这串字符的长度大于3,并且字符首字母为A,,则输出“格式正确”,如果这串字符的 ...

  4. Chrome插件开发教程收集

    教程: http://open.chrome.360.cn/extension_dev/overview.html http://www.cnblogs.com/liuxianan/p/chrome- ...

  5. centos iptables关于ping

    配置iptables策略后,一般来说INPUT都是DROP然后配置需要通过的 当执行: iptables -P INPUT DROP 后,机器就不能被ping通了! 因为icmp没有添加到规则中! 于 ...

  6. java中/与%的区别

    System.out.println(3/5) = 0: System.out.println(2/5) = 0: System.out.println(4/5) = 0: System.out.pr ...

  7. SimpleDateFormat关于时间类的一些常用处理

    项目中经常会出现对时间类的一些处理,记录一下: 实例一:/** * 获取当前时间是星期几? * * @param args */ public static void main(String[] ar ...

  8. python3使用configparser解析配置文件

    http://www.jb51.net/article/87402.htm 需要注意的是每一个字段后面的值外面没有引号,切记,自己第一次配置时,加了引号,搞了半天 没找到错误,, 在用Python做开 ...

  9. Gentoo:startx出现Failed to load module问题

    安装完xorg-server后,startx启动桌面环境,出现缺少模块错误. 查看log: cat /var/log/Xorg.0.log | grep EE [75.403] (EE) Failed ...

  10. [Algorithm] Median Maintenance algorithm implementation using TypeScript / JavaScript

    The median maintenance problem is a common programming challenge presented in software engineering j ...