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. Java中Set Map List 的区别

    java中set map list的区别: 都是集合接口 简要说明 set --其中的值不允许重复,无序的数据结构 list   --其中的值允许重复,因为其为有序的数据结构 map--成对的数据结构 ...

  2. linux下文件搜索命令学习笔记

    1. locate:按照文件名搜索文件 locate filename 与find在整个操作系统中遍历搜索不同,locate命令在/var/lib/mlocate这个后台数据库中按照文件名搜索,所以优 ...

  3. zabbix 自定义探索规则发现服务器上面的kvm虚拟机和对应的网卡

    安装完zabbix服务器之后 只有两个探索规则模版,挂载点探索和网卡探索 场景描述:想使用zabbix监控kvm虚拟机的网卡的流量情况, 获取虚拟机和网卡对应关系 虚拟机 S-1 virsh domi ...

  4. 运行maven项目

  5. shell 除法 小数点

    比如: num1=2 num2=3 num3=`echo "scale=2; $num1/$num2" | bc` 使用bc工具,sclae控制小数点后保留几位 还有一种方法 aw ...

  6. openSUSE4.1 安装docker

    安装完Leap后,通过YaST-Software Management安装docker. 安装 docker . yast2-docker. ruby2.1-rubygem-docker-api  . ...

  7. Ubuntu下查看机器信息

    原文地址 测试机器的硬件信息 查看CPU信息(看到有8个逻辑CPU, 也知道了CPU型号)   # cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq ...

  8. Spark&Hadoop:scala编写spark任务jar包，运行无法识别main函数，怎么办?

    昨晚和同事一起看一个scala写的程序,程序都写完了,且在idea上debug运行是ok的.但我们不能调试的方式部署在客户机器上,于是打包吧.打包时,我们是采用把外部引入的五个包(spark-asse ...

  9. ssh+expect批量分发

    Expect安装 [root@web02 scripts]# yum install expect SSH密钥生成 [root@web02 scripts]# ssh-keygen -t dsa   ...

  10. meta

    <meta charset="UTF-8"> <meta name="viewport" content="width=device ...