微信小程序中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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
JavaScript实现简单轮播图效果
Dec 01 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
PHP+DBM的同学录程序(2)
2006/10/09 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
提高网站信任度的技巧
2008/10/17 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
python装饰器的特性原理详解
2019/12/25 Python
Python 在函数上添加包装器
2020/07/28 Python
浅析NumPy 切片和索引
2020/09/02 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
促销活动总结范文
2014/04/30 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
会议新闻稿
2015/07/17 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
Python MNIST手写体识别详解与试练
2021/11/07 Python
Hive导入csv文件示例
2022/06/25 数据库