微信小程序事件对象中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 相关文章推荐
根据出生日期自动取得星座的js代码
Jul 20 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
浅谈Vue的响应式原理
May 30 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
PHP性能优化 产生高度优化代码
2011/07/22 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
小程序云开发实战小结
2018/10/25 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
python 字符串split的用法分享
2013/03/23 Python
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python星号*与**用法分析
2018/02/02 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
python 用struct模块解决黏包问题
2020/11/07 Python
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
检察官就职演讲稿
2014/01/13 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
MySQL update set 和 and的区别
2021/05/08 MySQL
Django中session进行权限管理的使用
2021/07/09 Python