简单了解微信小程序 e.target与e.currentTarget的不同


Posted in Javascript onSeptember 27, 2019

在小程序的点击事件中,我们经常使用这两个属性来传参,看起来效果一样,查了官方文档如下:

target:事件源组件对象

currentTarget:当前组件对象

什么意思?我刚开始就有点不懂,那就直接上代码:

<view id="outter" bindtap="tap1">
  outer view
  <view id="middle" bindtap="tap2">
   middle view
   <view id="inner" bindtap="tap3">
    inner view
   </view>
  </view>
</view>
 tap1: function (e) {
  console.log(1, e)
 },
 tap2: function (e) {
  console.log(2, e)
 },
 tap3: function (e) {
  console.log(3, e)
 },

结果如下:

简单了解微信小程序 e.target与e.currentTarget的不同

点击子元素inner,但由于事件冒泡父元素middle和outter都触发,从上图中我们可以看出区别:

父元素middle和outter,target的id都是等于inner(子元素的id);

middle的currentTarget的id是middle,outter的currentTarget的id是outter;

总结:

target:事件源组件对象(事件冒泡源头)

currentTarget:当前组件对象(就是当前对象)

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

Javascript 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 #Javascript
微信小程序 冒泡事件原理解析
Sep 27 #Javascript
JavaScript实现背景自动切换小案例
Sep 27 #Javascript
vue监听用户输入和点击功能
Sep 27 #Javascript
vue实现文字加密功能
Sep 27 #Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 #Javascript
vue实现购物车小案例
Sep 27 #Javascript
You might like
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
JS判断变量是否为空判断是否null
2014/07/25 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
python实现2048小游戏
2015/03/30 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
python回调函数中使用多线程的方法
2017/12/25 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
Android笔试题总结
2014/11/29 面试题
Delphi软件工程师试题
2013/01/29 面试题
小学教师读书活动总结
2014/07/08 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
机关职员工作检讨书
2014/10/23 职场文书
保管员岗位职责
2015/02/14 职场文书
2015年科室工作总结
2015/04/10 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书