微信小程序的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始终对应事件所绑定的组件。

原文地址:https://www.cnblogs.com/yeagen/p/11089858.html

时间: 2024-11-06 03:52:58

微信小程序的target和currentTarget的区别的相关文章

微信小程序中target与currentTarget

如有错误,请纠出,大家一起进步!!! target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象.在微信小程序中也可总结为:target指向发生事件的组件,currentTarget指向绑定事件的组件. 下面请看例子: text.wxml: <view class="view1&

微信小程序————1wxss和css的部分区别

集成微信提供 的weui进微信小程序wxss 最开始将weui.css 全部复制进入app.wxss里面,发现跑不起来. 搜索了下,常见原因有如下几点: 截止2016.11.14日, wxss和css的部分区别 不支持:first-child这类写法, 不支持:active 不支持:checked 不支持自定义字体 @font-face { font-weight: normal; font-style: normal; font-family: "weui"; .a>.b .a

微信小程序组件——bindtap和catchtap的区别

了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程就是DOM事件流. JS冒泡事件:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的(所有祖先元素)中被触发.这 一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层 共同点 在微信小程序的事件机制中,bindtap和catchta

微信小程序 - 事件绑定bind和catch 区别

本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别bind和catch事件.在小程序中事件分为冒泡事件和非冒泡事件: bindtap  事件绑定不会阻止冒泡事件向上冒泡 catchtap  事件绑定可以阻止冒泡事件向上冒泡 假如有三个view点击事件都是用的bindtap,三个view是层级包含关系 <view id="outer" bindtap="out"> outer view <view id="middle&

微信小程序和手机APP之间的对比

微信小程序不是一个独立的应用程序.微信计划上线后,微信将向更大的平台移动.它可以成为PC网络导航等移动电话应用的新里程碑.在这里,我们将回答微信小程序和手机APP游戏之间的区别,以及它们的优缺点.只有当你理解清楚,你才能知道是开发一个独立的应用程序还是直接使用微信小程序. 哪个更好,威查应用还是独立应用? 除了公共开发成本低,采集成本低,无需下载外,小程序大大改善了服务请求延迟和用户体验,使其能够承载复杂的服务功能.并为用户提供更好的用户体验. 与本机应用程序applet相比,它的使用体验几乎相

微信小程序,学习笔记(一)框架,视图层

微信小程序,学习笔记(一)框架,视图层 学习链接:http://www.w3cschool.cn/weixinapp/ 因为其实并非原创,但是并没有什么好的类别可选,所以修改成:"翻译"了. 熟悉 文档结构介绍 --- [D] pages --- [D] utils --- [F] app.js --- [F] app.json --- [F] app.wxss 全局变量.对象.方法 普通类型 对象 App 应用程序全局实例,在app.js中定义,每个程序只有一个实例,可以通过如下方式

微信小程序开发教程(八)视图层——.wxml详解

框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合. 微信小程序在逻辑层将数据进行处理后发送给视图层展现出来,同时接受视图层的事件反馈. ? .wxml文件用于描述页面的结构. ? .wxss文件用于描述页面的样式. 视图层以给定的样式展现数据并将时间反馈给逻辑层,而数据展现是以组件来进行的.组件(Component)是视图的基本单

{{view 视图层}}微信小程序

微信小程序 view 视图层//自学 1.数据绑定 数据绑定 WXML中的动态数据均来自对应Page的data. 简单绑定 数据绑定使用"Mustache"语法(双大括号)将变量包起来,可以作用于: 内容 <view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } }) 组件属性(需要在双引号之内) <view id="item-{{id}}"> <

微信小程序-B站:wxml和wxss文件

WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. (小安娜:好像很厉害的样子,那基础组件.事件系统是什么?感觉更厉害,因为必须结合它们.),基础组件类似HTML中的标签,事件系统是JavaScript中的事件,可处理逻辑反应到界面上:wxml只是一个文件格式,如果没有组件和事件它没任何用处,又如果把组件.事件写在txt文档里面也没任何用处,所以没有谁更厉害,相辅相成的关系.(小安娜:嗦嘎,就好像ap.ad.ad