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

<!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. 你也许还不知道const_cast,static_cast,dynamic_cast,reinterpret_cast的区别吧？

    [QQ群: 189191838,对算法和C++感兴趣可以进来]       开篇立意: C++中各种转换令人眼花缭乱,看似差不多,实际差很多,而且在当今时间,做一个"差不多先生"其 ...

  2. 代理模式（Proxy）--动态代理(CGLIB)

    上一篇:代理模式(Proxy)--动态代理(jdk) (1)CGLIB技术是第三方代理技术,可以对任何类生成代理,代理的原则是对目标对象进行继承代理 (2)如果目标对象被final修饰,则无法被CGL ...

  3. rpm安装、卸载、升级、查询和验证

    RPM 的全称为Redhat Package Manager ,是由Redhat 公司提出的,用于管理Linux 下软件包的软件.Linux 安装时,除了几个核心模块以外,其余几乎所有的模块均通过RP ...

  4. 分布式数据库以及OS

    http://blog.csdn.net/longronglin/article/category/230501

  5. 泳池水面fresnel 的近似替代

    vs float4 ep = TBMultiply(ModelViewMatrix, FinalPosition); DistFromEye.x = TBSaturate( 10.0 + ep.z / ...

  6. http://www.cnblogs.com/hoojo/archive/2011/06/08/2075201.html

    http://www.cnblogs.com/hoojo/archive/2011/06/08/2075201.html

  7. mysql二进制安装及基础操作

    mysql二进制安装及基础操作 环境说明: 系统版本    CentOS 6.9 x86_64 软件版本    mysql-5.6.36-linux-glibc2.5-x86_64 1.安装 采用二进 ...

  8. object-c 框架之经常使用结构体

    Foundation 框架定义经常使用结构体.结构体採用object-c 定义:经常使用NSSRange,NSPoint.NSSize,NSRect等 一.NSRange 创建范围结构体. 方法:NS ...

  9. 单例模式 - GCD 、兼容ARC和MRC

    单例模式 - GCD .兼容ARC和MRC 单例模式的作用: 1,能够保证在程序执行过程.一个类仅仅有一个实例,并且该实例易于供外界訪问 2,从而方便地控制了实例个数,并节约系统资源 单例模式的使用场 ...

  10. 【Java】Java_18 方法

    方法(Method) 设计方法的原则:方法的本意是功能块,就是实现某个功能的语句块的集合.   我们设计方法的时候,最好保持方法的原子性,就是一个方法只完成1个功能,这样利于我们后期的扩展 方法的要点 ...