简单了解微信小程序 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 表单规则集合对象
Jul 21 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
JS函数式编程实现XDM一
Jun 16 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
一个简易需要注册的留言版程序
2006/10/09 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
详细介绍Python中的偏函数
2015/04/27 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
Python秒算24点实现及原理详解
2019/07/29 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
护士自我评价范文
2014/01/25 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
总经理检讨书范文
2015/02/16 职场文书
Golang gRPC HTTP协议转换示例
2022/06/16 Golang