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. 【leedcode】add-two-numbers

    You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...

  2. 自动重启sqlserver服务

    公司一台官网服务器是由.net语言sqlserver数据库开发的,官网后台登录要涉及到sql数据库,现在出了一个问题,每天登录后台都会报错,要重启sqlserver才能进入,问题一直也没有解决,但是也 ...

  3. DWR实现后台推送消息到web页面

    DWR简介 DWR(Direct Web Remoting)可用于实现javascript直接调用java函数和后台直接调用页面javascript代码,后者可用作服务端推送消息到Web前端. (服务 ...

  4. 第四篇：白话tornado源码之褪去模板外衣的前戏

    加班程序员最辛苦,来张图醒醒脑吧! ... ... ... 好了,醒醒吧,回归现实看代码了!! 执行字符串表示的函数,并为该函数提供全局变量 本篇的内容从题目中就可以看出来,就是为之后剖析tornad ...

  5. 分享 rabbitMQ入门详解

    原文地址http://blog.csdn.net/cugb1004101218/article/details/21243927 目录(?)[-] rabbitMQ说明文档 rabbitMQ是什么 消 ...

  6. requests库基本使用

    在python中,字典的输出内容跟json格式内容一样,但是字典的格式是字典,json的格式是字符串,所以在传输的时候(特别是网页)要转换使用. r.text返回的是Unicode型的数据. r.co ...

  7. AngularJS Best Practices: resource

    A factory which creates a resource object that lets you interact with RESTful server-side data sourc ...

  8. 区间K 大数查询

      算法训练 区间k大数查询   时间限制:1.0s   内存限制:256.0MB 问题描述 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列 ...

  9. linux-----------linux查看并发数

    1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态:netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a ...

  10. JSP中动态INCLUDE与静态INCLUDE的区别

    动态INCLUDE 用法: <jsp:include page="included.jsp" flush="true" /> 说明: 它总是会检查所 ...