微信小程序事件对象中e.target和e.currentTarget的区别详解


Posted in Javascript onMay 08, 2019

在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下来说说这二者的区别。

首先上代码:

wxml部分:

<view id='tar-father' bindtap='click'>
  父组件
  <view id='tar-children'>子组件</view>
 </view>

wxss部分:

#tar-father{
 width: 300rpx;
 height: 300rpx;
 background-color: skyblue;
}
#tar-children{
 background-color: pink;
}

效果图

微信小程序事件对象中e.target和e.currentTarget的区别详解

js部分:

click: function (event) {
  console.log(event.target)
  console.log(event.currentTarget)
 }

当点击图中粉色子组件区域时的输出结果:

微信小程序事件对象中e.target和e.currentTarget的区别详解

event.target 为其子组件,也就是触发该事件的源头组件

event.currentTarget 为事件所绑定的组件

当点击图中蓝色父组件区域时的输出结果:

微信小程序事件对象中e.target和e.currentTarget的区别详解

event.target 为父组件,因为触发的源头也就是父组件本身

event.currentTarget 始终为事件所绑定的组件

总结:target对应的是触发事件的源头组件,这个组件有可能是子组件,有可能是父组件,主要是看执行动作的区域。而currentTarget始终对应事件所绑定的组件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
javascript自执行函数
Feb 10 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 #Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 #Javascript
vue实现菜单切换功能
May 08 #Javascript
浅谈JS的原型和继承
May 08 #Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 #Javascript
微信小程序封装自定义弹窗的实现代码
May 08 #Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 #Javascript
You might like
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
php简单压缩css样式示例
2016/09/22 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python itertools模块详解
2015/05/09 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
基于python实现对文件进行切分行
2020/04/26 Python
python Tornado框架的使用示例
2020/10/19 Python
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
工程专业应届生求职信
2014/02/19 职场文书
捐资助学倡议书
2014/04/15 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
公历12个月名称的由来
2022/04/12 杂记
LeetCode189轮转数组python示例
2022/08/05 Python