专栏首页算法与编程之美前端|event.target与event.currentTarget的区别

前端|event.target与event.currentTarget的区别

本文首发于微信公众号:"算法与编程之美"

前言

event.target事件和event.currentTarget事件,经常被人们混淆。因为它们两个有时候的返回值是完全一样的,因此很具有迷惑性。然而如果真的是一样的,那当初官方就不会做这样没有意义的事了。下面我就结合我所学的知识来给大家讲一下,这两者的区别。

定义

Event.target:返回触发事件的元素;

Event.currentTarget:返回绑定事件的元素。

解释

我写了两个简单的demo,结合这两个demo,大家马上就可以理解它们二者的区别在哪里。

<body> <div id="bai" style="background-color: #CC5522; width: 12.5rem;height: 12.5rem;"> <a href="" style="background-color: cadetblue;">点击一下</a> </div> </body> <script type="text/javascript"> var bai = document.getElementById("bai"); bai.onclick = function(event) { var tar = event.target; var tagName = tar.nodeName.toLowerCase(); alert("触发事件的元素是:" + tagName);/* 当我点击a标签的时候,网页就会提醒我“触发事件的元素是:a”; 当我点击外层div标签的时候,网页则会提醒我“触发事件的元素:div”。*/ }

我们接着看第二个demo:

<body> <div id="bai" style="background-color: #CC5522; width: 12.5rem;height: 12.5rem;"> <a href="" style="background-color: cadetblue;">点击一下</a> </div> </body> <script type="text/javascript"> var bai = document.getElementById("bai"); bai.onclick = function(event) { alert("被点击了"); /* 无论我点击里面的a标签还是外层的div标签,网页给我的提示都是“被点击了” */ }

对比一下两个demo,不难发现,我都是将点击事件绑定在div上面的,但是在第一个demo里面我是利用的target事件返回的被点击的标签的名称。而在第二个demo里面,我仅仅让点击事件返回“被点击了”。而无论是不是直接点击的div,点击事件都会被发起。

所以当div里的a标签被点击时,也就是当我们用鼠标点击了div内的这个超链接时,这个被我们点击的a标签就是触发事件的标签了,也就是event.target;而整个点击事件是绑定在div上的,所以不管点击了哪里,这个div都是事件的发起者,即就是event.currentTarget。

不知道大家是否明白了呢?

END

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:邱胜

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python|动态规划反推解决最低票价

    在一个火车旅行很受欢迎的国度,你提前一年计划了一些火车旅行。在接下来的一年里,你要旅行的日子将以一个名为days的数组给出。每一项是一个从 1 到 365 的整...

    算法与编程之美
  • 网页|扇形菜单—你不get一下吗?

    扇形菜单,就是将导航菜单制作成扇形的形状。简单来说就是通过点击一个按钮,弹出一个以这个按钮为圆心的扇形按钮菜单,(可以根据需要添加按钮个数)。可以通过改变一下半...

    算法与编程之美
  • 网页|css中的匹配问题

    众所周知在写css的时候,会根据html中类的定义或者id的定义来写相应的css代码。给不同的类定义不同的样式,当然为了能够少写一些代码,大家就会在css中引用...

    算法与编程之美
  • Kafka快速入门系列(5) | Kafka的工作流程及文件存储机制

      Kafka中消息是以topic进行分类的,生产者生产消息,消费者消费消息,都是面向topic的。   topic是逻辑上的概念,而partition是...

    不温卜火
  • 学生请假系统设计

    需求分析:学生日常请假出入校门,学生向教师请假,教师在手机中提交请假信息,提交后可按请假时间出校门。教师可查看所有学生请假历史,统计分析,同时家长会看到自己孩子...

    热心的程序员
  • Android SystemUI(一):图文并茂的介绍 :D

    菜天哥哥
  • 传特斯拉与英伟达分道扬镳,英特尔成特斯拉车载多媒体系统新芯片供应商

    【新智元导读】据彭博社报道,特斯拉将原本为其电动车提供车载多媒体系统的供应商英伟达更换为英特尔。特斯拉的Model 3及其他车型新版本将使用新的英特尔处理模块。...

    新智元
  • 设计师要懂的用户思维

    用户思维,顾名思义,就是“站在用户的角度来思考问题”的思维。或者更广泛地说,就是站在对方的角度、换位思考。在产品设计领域,具备用户思维至关重要。马化腾说过,“产...

    Shawn.W
  • 论密码重置漏洞的十种方法

    简单记录一下平时漏洞挖掘的时候对于密码重置漏洞的十种方法,有补充的朋友可以回复公众号补充哈。

    用户6343818
  • FPGA设计高级进阶-清华大学电子工程系

    碎碎思

扫码关注云+社区

领取腾讯云代金券