微信小程序的target和currentTarget的区别
https://www.jb51.net/article/160886.htm
在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下来说说这二者的区别。
首先上代码:
wxml部分:
| 
 1 
2 
3 
4 
 | 
<view id='tar-father' bindtap='click'>  父组件  <view id='tar-children'>子组件</view> </view> | 
wxss部分:
| 
 1 
2 
3 
4 
5 
6 
7 
8 
 | 
#tar-father{ width: 300rpx; height: 300rpx; background-color: skyblue;}#tar-children{ background-color: pink;} | 
效果图

js部分:
| 
 1 
2 
3 
4 
 | 
click: function (event) { console.log(event.target) console.log(event.currentTarget)} | 
当点击图中粉色子组件区域时的输出结果:

event.target 为其子组件,也就是触发该事件的源头组件
event.currentTarget 为事件所绑定的组件
当点击图中蓝色父组件区域时的输出结果:

event.target 为父组件,因为触发的源头也就是父组件本身
event.currentTarget 始终为事件所绑定的组件
总结:target对应的是触发事件的源头组件,这个组件有可能是子组件,有可能是父组件,主要是看执行动作的区域。而currentTarget始终对应事件所绑定的组件。
微信小程序的target和currentTarget的区别的更多相关文章
- 微信小程序中target与currentTarget
		
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...
 - vue中的绑定class和微信小程序中的绑定class的区别
		
微信小程序 小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定.在进行class与style绑定时,可以直接绑定,也可以带上逻辑与,或者三元运算进行条件控制 JS dat ...
 - 微信小程序组件——bindtap和catchtap的区别
		
了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...
 - 微信小程序——e.target与e.currentTarget的区别
		
在小程序的点击事件中,我们经常使用这两个属性来传参,看起来效果一样,查了官方文档如下: target:事件源组件对象 currentTarget:当前组件对象 什么意思?我刚开始就有点不懂,那就直接上 ...
 - 微信小程序 事件绑定 bind和catch 区别
		
转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...
 - 微信小程序中concat 和push的区别
		
push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(1); arr.push(2); arr.push([3, 4]) arr.push ...
 - 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践
		
1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...
 - 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程
		
一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...
 - 微信小程序中的target和currentTarget区别
		
最近在学习微信小程序相关知识,其中提到了两个属性target和currentTarget,其中target是指向触发事件的元素(常见于事件委托中),而currentTarget是指向捕获事件的元素(即 ...
 
随机推荐
- [ 转载 ] vue.js面试题一
			
转载自:https://www.cnblogs.com/aimeeblogs/p/9501490.html 如有侵权 联系删除 Vue.js面试题整理 一.什么是MVVM? MVVM是Model-Vi ...
 - 洛谷P1341 无序字母对【欧拉路】【dfs】
			
题目:https://www.luogu.org/problemnew/show/P1341 题意:给定n对字母对,要求构造一个个数为n+1的字符串,使得每一个字母对都在里面出现过. 思路:这种题目都 ...
 - BZOJ 3903 反垄断 (最大流推的结论题)
			
题目 中文题目,不解释: BZOJ传送门 分析 这道题BZOJ上也只有几个人过-奇怪了 下面是正解 原问题为一个二分图边染色问题.首先考虑最好情况.最理想情况的分配为:设一个点xxx的度为dgr(x) ...
 - activemq的配置与结合spring使用
			
其实无论在win下还是在linux下,都可以运行得很爽 下载安装包地址: http://www.apache.org/dyn/closer.cgi?path=/activemq/5.12.1/apac ...
 - [Flutter] Stack Layout
			
Normally if you place three the same size icons in a stack, they will stands on top of each other, t ...
 - Django-常用异常
			
1 from rest_framework.authentication import BasicAuthentication raise AuthenticationFailed(res.dict) ...
 - NVMe - NB的特性
			
翻译一下,纯粹是为了记住这些特性: NVMe provides the following benefits: ● Ultra-low latency 非常低的延迟 ● Very high throu ...
 - POJ 2778 DNA Sequence  —— (AC自动机+矩阵快速幂)
			
距离上次做AC自动机有很久了=.=,以前这题的思路死活看不懂,现在还是觉得很好理解的. 思路参见:http://blog.csdn.net/morgan_xww/article/details/783 ...
 - go结构体的方法和普通函数
			
package main import ( "fmt" "math" ) type vertex struct { X, Y float64 } //值接收者是 ...
 - Tensorflow使用训练好的模型进行测试,发现计算速度越来越慢
			
实验时要对多个NN模型进行对比,依次加载直到第8个模型时,发现运行速度明显变慢而且电脑开始卡顿,查看内存占用90+%. 原因:使用过的NN模型还会保存在内存,继续加载一方面使新模型加载特别特别慢,另一 ...