简单了解微信小程序 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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
jQuery参数列表集合
Apr 06 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JavaScript 函数的执行过程
May 09 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
vue 限制input只能输入正数的操作
Aug 05 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
jQuery参数列表集合
2011/04/06 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
python基于socket实现网络广播的方法
2015/04/29 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python中的字符串内部换行方法
2018/07/19 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
工业设计专业推荐信
2013/10/29 职场文书
学期自我评价
2014/01/27 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2015年工程师工作总结
2015/04/30 职场文书
高一作文之乐趣
2019/11/21 职场文书