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

<!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. 【bzoj4152】【The Captain】最短路（堆优化）（浅尝ACM-B）

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62834538 Description 给定平面上 ...

  2. 【分享】· 图床&在线分享演示文稿

    关于图床 什么是图床? 这并不是一个多么高大上的名词概念!用比较通俗的话来说,当你在撰写新文章时,你需要去插入图片以使得你的文章内容更加直观.易懂,这个时候有以下几种办法: 在博客根目录的 sourc ...

  3. linux下批量更改一个目下的目录和文件的权限

    对于网站目录我们一般设置目录的权限是755, 而文件的权限是644  ,上传目录另设 比如我们要设置web目录下的所有目录的权限是755,文件的目录是644,那么我们可以批量修改吗?答案是肯定的, 就 ...

  4. Asp.net+EF

    EFRepositoryBase using System; using System.Collections.Generic; using System.Data; using System.Dat ...

  5. java程序监控tomcat中部署的项目的状态以及控制某些项目的启动停止

    原文:http://blog.csdn.net/liuyuqin1991/article/details/49280777 步骤如下: ①:首先授权用户使获得这些权限 You can find the ...

  6. HUD2795 线段树（单点更新）

    题目中给出的h和w范围均大,其实n的最大范围才200000,所以我们建立的线段树大小为min(h,n),线段树的每一个节点包含一个变量c,记录当前区间内还剩下的可以put on的最大长度.插入一个数时 ...

  7. docker 常用 命令

    http://os.51cto.com/art/201409/451117.htm 2.1 在测试机启动容器,安装ssh docker run -i -t ubuntu /bin/bash #此方式运 ...

  8. log4j输出日志到flume

    现需要通过log4j将日志输出到flume,通过flume将日志写到文件或hdfs中 配置flume-config文件 将日志下沉至文件 a1.sources = r1 a1.sinks = k1 a ...

  9. JWT笔记

    JWT是一个无状态登录的技术．所谓无状态,是指和传统的session技术相比,服务器端不需要存储用户的信息．在JWT技术中,agent向server请求一个Token． 这个Token由三部分组成,h ...

  10. zoj 3882 Help Bob(zoj 2015年7月月赛)

    Help Bob Time Limit: 2 Seconds      Memory Limit: 65536 KB There is a game very popular in ZJU at pr ...