event.target 和 event.currentTarget 的区别

举例说明：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        div {

            margin: 1rem;

            padding: 1rem;

        }

        #a {background-color: #f00;}

        #b {background-color: #0f0;}

        #c {background-color: #00f;}

        #d {background-color: #aaa;}

    </style>

</head>

<body>

    <div id="a">a

        <div id="b">b

          <div id="c">c

            <div id="d">d</div>

          </div>

        </div>

    </div>

    <script>

        function logTarget(e) {

            console.log('target:' + e.target.id + ' & currentTarget:' + e.currentTarget.id);

        }

        document.getElementById('a').addEventListener('click', logTarget, false);

        document.getElementById('b').addEventListener('click', logTarget, false);

        document.getElementById('c').addEventListener('click', logTarget, false);

        document.getElementById('d').addEventListener('click', logTarget, false);

    </script>

</body>

</html>

当点击d的时候，输出：

target:d & currentTarget:d

target:d & currentTarget:c

target:d & currentTarget:b

target:d & currentTarget:a

当点击b的时候，输出：

target:b & currentTarget:b

target:b & currentTarget:a

结论

  • target始终鼠标点击的element，固定不变；
  • currentTarget在事件捕获或者事件冒泡过程中，指向当前的element，会不断变化。

【前端】event.target 和 event.currentTarget 的区别的更多相关文章

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

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

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

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

  3. event.target和event.currentTarget区别

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素

  4. Event.target和Event.currentTarget的区别

    <style> * { margin:0; padding:0; list-style:none; } #ul { width:400px; height:250px; margin:0 ...

  5. event.target和event.currentTarget的区别----0605加深理解

    target:触发事件的元素.currentTarget:事件绑定的元素.两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: <ul id="ulT&qu ...

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

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

  7. js中event.target和event.srcElement的区别

    看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...

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

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

  9. 捕获当前事件作用的对象event.target和event.srcElement

    语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...

随机推荐

  1. php登陆与注册

    登陆页面 <body><h1>登录页面</h1><form action="./dengluchuli.php" method=" ...

  2. EF 延迟加载和预先加载

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精   本节探讨延迟加载和预先加载 Entity Frame ...

  3. 《30天自制操作系统》19_day_学习笔记

    harib16a: 这一部分,我们在系统中实现读取文件内容的命令type.在windows中,输入“type 文件名”,在Linux中,输入“cat 文件名”都可以显示文件的内容.我们先来看看如何读取 ...

  4. iar调试

    我们可以自己建立自己的工程了,但这一步只是开发中的第一小步.今天就来说说开发中举足轻重的另外一件事:调试. 其实调试本身也并不难,楼主总结,调试关键在于两件事,一是运行,二是观察,为了更好的实现这两者 ...

  5. WebForm——IIS服务器、开发方式和简单基础

    一.B/S和C/S 1.C/S C/S 架构是一种典型的两层架构,其全程是Client/Server,即客户端服务器端架构,其客户端包含一个或多个在用户的电脑上运行的程序,而服务器端有两种,一种是数据 ...

  6. ADT(Android Developer Tools) GIT功能不全，远程提交的时候账户密码不能保存账户和密码解决方式

    需要安装Eclipse的GIT插件EGIT http://download.eclipse.org/egit/updates/

  7. 什么情况下会用到try-catch

    本文不区分语言,只为记录一次有收获的面试. 面试官:什么情况下用到try-catch?程序员:代码执行预料不到的情况,我会使用try-catch.面试官:什么是预料不到的情况呢?程序员:比如我要计算a ...

  8. $.Ajax({});方法使用 返回json格式 string格式

    //Json格式 $.ajax({ url: url + "?action=Save1", type: "post", dataType: "json ...

  9. Adressing

  10. [转]九个Console命令，让js调试更简单

    转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...