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

<!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. （转）秒杀系统中如何动态生成下单随机URL

    秒杀系统中通常会避免用户之间访问下单页面的URL(避免使用爬虫来造成不公平).所有需要将URL动态化,即使秒杀系统的开发人员也无法在知晓在秒杀开始时的URL.解决办法是在获取秒杀URL的接口中,返回一 ...

  2. 了解一下运行软件的自我保护(RASP)

    看下这篇文章: http://www.jianshu.com/u/c89141b2d51e 相应的demo演示: https://github.com/xbeark/javaopenrasp

  3. 10 种机器学习算法的要点（附 Python）(转载)

    一.前言 谷歌董事长施密特曾说过:虽然谷歌的无人驾驶汽车和机器人受到了许多媒体关注,但是这家公司真正的未来在于机器学习,一种让计算机更聪明.更个性化的技术 也许我们生活在人类历史上最关键的时期:从使用 ...

  4. SSO单点登录系列5：cas单点登录增加验证码功能完整步骤

    本篇教程cas-server端下载地址:解压后,直接放到tomcat的webapp目录下就能用了,不过你需要登录的话,要修改数据源,C:\tomcat7\webapps\casServer\WEB-I ...

  5. Angular 学习笔记——filter

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  6. JAVA Eclipse中如何简易的实现消息机制

    大部分情况下,我们需要实现的消息机制无非是某个类得到了数据,需要传递到某个主界面上去显示,可以把这个消息在类中做成全局变量,主界面的类用一个线程定时扫描,如果这个数据不是空,则说明被类刷新了,那么更新 ...

  7. K-近邻算法的Python实现 ： 源代码分析

    网上介绍K-近邻算法的样例非常多.其Python实现版本号基本都是来自于机器学习的入门书籍<机器学习实战>,尽管K-近邻算法本身非常easy,但非常多刚開始学习的人对其Python版本号的 ...

  8. wmi在渗透测试中的运用

    Abusing WMI to Build a Persistent, Asynchronous, and Fileless Backdoor 滥用 WMI 打造一个永久.异步.无文件后门 http:/ ...

  9. S5:桥接模式 Bridge

    将抽象的部分与实现的部分分离,使它们都可以独立变化.抽象与实现的分离,指的是抽象类和派生类用来实现自己的对象.实现系统可能有多角度分类,每一种分类都有可能变化,那么就把这种多角度分离出来,让他们独立变 ...

  10. Laravel之哈希/常用函数/分页

    一.哈希 1.简介Laravel Hash 门面为存储用户密码提供了安全的Bcrypt 哈希算法.如果你正在使用Laravel 应用自带的AuthController 控制器,将会自动为注册和认证使用 ...