简单了解微信小程序 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 相关文章推荐
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
PHP强制转化的形式整理
2020/05/22 PHP
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
Python复制文件操作实例详解
2015/11/10 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
python可以用哪些数据库
2020/06/22 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
房屋租赁合同解除协议书
2014/10/11 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript