微信小程序中target和currentTarget的区别小结


Posted in Javascript onNovember 06, 2020

前言

在小程序中,e.target与e.currentTarget是非常重要的,尤其是涉及到页面传值时

currentTarget和target都是组件的一些属性值集合,由“data-属性名”定义的一些属性值

currentTarget:事件触发的当前事件(当前事件,可能是触发事件的源组件,可能是触发的事件组件(即触发事件源组件的子元素),此时点击子元素还是父元素,都是当前事件,应用e.currentTarget
target:触发事件的源组件(事件注册/绑定所在组件)

举个例子:

<view bindtap="parentClick" data-parent="父元素">
<view data-child="子元素">编辑</view> 
 </view>

然后点击父元素中的子元素时:

parentClick事件中的currentTarget和target打印出来,如下:

parentClick:function(e){
console.log("点击父元素")
console.log("target",e.target)//target:{child:"子元素"}
console.log("currentTarget",e.currentTarget)//target:{parent:"父元素"}
}

因为绑定在父元素上的parentClick事件,是由子元素触发的,所以target的值就是子元素所包含的一些属性值集合;currentTarget则是绑定事件的该组件(父元素)的属性值集合。

给子元素绑定一个事件:childClick,打印出来的currentTarget和target就是一样的。

<view bindtap="parentClick" data-parent="父元素">
<view bindtap="childClick" data-child="子元素">编辑</view> 
 </view>

然后点击子元素事件:

childClick:function(e){
console.log("点击父元素")
console.log("target",e.target)//target:{child:"子元素"}
console.log("currentTarget",e.currentTarget)//target:{child:"子元素"}
}

扩展

结合this来看:

  • this === e.currentTarget 总是为true
  • this === e.target 有可能不是true

到此这篇关于微信小程序中target和currentTarget区别的文章就介绍到这了,更多相关微信小程序target和currentTarget区别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
vuejs如何配置less
Apr 25 Javascript
React组件生命周期详解
Jul 03 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 #Javascript
微信小程序调用后台service教程详解
Nov 06 #Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 #Javascript
在nuxt中使用路由重定向的实例
Nov 06 #Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 #Javascript
Nuxt的路由配置和参数传递方式
Nov 06 #Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 #Javascript
You might like
封装一个PDO数据库操作类代码
2009/09/09 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
python numpy元素的区间查找方法
2018/11/14 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
软件设计的目标是什么
2016/12/04 面试题
ktv中秋节活动方案
2014/01/30 职场文书
农业项目建议书
2014/08/25 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
党员承诺书范文2015
2015/04/27 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
2016年国陪研修感言
2015/11/18 职场文书
《所见》教学反思
2016/02/23 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js