微信小程序事件对象中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 相关文章推荐
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
Node 自动化部署的方法
Oct 17 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
利用原生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
PHP实用函数分享之去除多余的0
2015/02/06 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
javascript基本类型详解
2014/11/28 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
pygame学习笔记(5):游戏精灵
2015/04/15 Python
python对数组进行反转的方法
2015/05/20 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
Python实现快速计算词频功能示例
2018/06/25 Python
python 同时运行多个程序的实例
2019/01/07 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
python反扒机制的5种解决方法
2021/02/06 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
开办饭店创业计划书
2013/12/28 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2014年教务工作总结
2014/12/03 职场文书
教师业务学习材料
2014/12/16 职场文书
审美与表现自我评价
2015/03/09 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
格林童话读书笔记
2015/06/30 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
MySQL存储过程及语法详解
2022/08/05 MySQL