微信小程序--事件对象

微信小程序(事件对象-绑定、冒泡、捕获) 拓展: 原生组件 小程序中的部分组件是由客户端创建的原生组件,包含: ①camera ②canvas ③input(仅在focus时表现为原生组件) ④map ⑤textarea ⑥video 一·事件冒泡 ①事件触发验证 <view id="parent" bindtap="parentFn"> <view id="child" bindtap="childFn">&... 阅读详情
当组件绑定事件触发后,将传递一个事件对象到绑定的函数中
function(event){
}

其中event事件对象携带的参数有

属性类型说明
typeString事件类型
timeStampInteger事件生成时的时间戳
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合

事件对象又分为Target和currentTarget:

属性类型说明
idString事件源组件的id
tagNameString当前组件的类型
datasetObject事件源组件上由data-开头的自定义属性组成的集合
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

点击 inner view 时,handleTap3 收到的事件对象 target 和 currentTarget 都是 inner,而 handleTap2 收到的事件对象 target 就是 inner,currentTarget 就是 outer。(即 当组件可冒泡时,父级对象被动触发时,父级事件对象的Target就是子级,currentTarget是子级。)

其中dataset是组件中以data-开头,多个单词由连字符-链接的属性

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
js:
Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})


微信小程序事件绑定案例:bind和catch区别、事件对象及自定义dataset数据 本文围绕微信小程序展开,介绍了 button 组件及其 bindtap 属性;阐述了事件绑定中 bind 和 catch 的相关内容;讲解了事件对象;还介绍了自定义 dataset 数据,并通过案例分析帮助理解,整体呈现了微信小程序部分组件、属性及数据相关的知识要点。 阅读详情

相关推荐

微信小程序 (事件对象---绑定、冒泡、捕获)

原生组件 小程序中的部分组件是由客户端创建的原生组件,包含: camera 相机 canvas 画布 input(仅在focus时表现为原生组件) 输入框 map 地图 textarea 多行输入框 video 视频 事件冒泡 事件触发验证: 点击父元素红色区域时,只会触发父级绑定的事件 点击子元素橙色区域 currentTarget和target有区别 ...

weixin_45343878的博客 697

小程序获取event.target父元素上的自定义属性

在做小程序的过程中,遇到了一个问题,在业务逻辑上需要通过在父元素身上绑定一个索引值来控制数据的保存。菜鸟如我,本想着点击后通过event.target获取到被点击元素的父元素,从而获取父元素身上的标签,试了几次之后发现这种办法是行不通的。 经过一段时间的对不同办法的尝试之后,想起了事件冒泡,以下是我的解决方案: <view> <view data-index="{{0}}" bind:tap="handleIndex"> <view>子元...

yanergo的博客 4245

【微信小程序】事件绑定和事件对象

小程序中绑定事件与在网页开发中绑定事件几乎一致,只不过在小程序不能通过on的方式绑定事件,也没有click等事件,小程序中绑定事件使用bind方法,click事件也需要使用tap事件来进行代替bind:事件名bind事件名事件处理函数需要写到.js文件中,在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面,我们可以直接在 Page 方法中创建事件处理函数。

云泽野の编程日记 3381

微信小程序WXML模板--事件对象属性以及target和currentTarget的区别

当事件回调触发的时候,会收到一个事件对象event。target 是 触发事件的源头组件,而 currentTarget 则是 当前事件所绑定的组件

weixin_73318685的博客 592

微信小程序 - 在视图组件上绑定函数并携带参数(事件对象自定义属性传参)

有时候,我们需要在小程序的视图组件上绑定一个函数,而且需要传递参数。小程序在组件上绑定事件后,传递参数的方式不同于前端开发其他场景中直接加参数的方式,事件对象的自定义属性,和普通 Vue 还不同。

🏆 前端领域优质创作者 894

从SN65HVD230芯片手册出发,手把手教你搞定3.3V CAN收发器电路(附典型应用图)

本文详细解析TI SN65HVD230芯片手册,指导完成3.3V CAN收发器电路设计。从关键参数解读到基础电路搭建,再到高级功能实现与EMC优化,提供完整的接口电路设计方案,并附典型应用图和故障排查指南,助力开发者提升CAN总线通信质量。

weixin_29997523的博客 505

微信小程序基础知识

基础用法和配置

欢迎来到我的博客!在这里,我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能! 4945

免费测试国外大模型Claude 3.7 Sonnet API:无需api key(秘钥)

Claude 3.7 Sonnet是Anthropic公司推出的第三代Claude系列AI模型中的中规模版本(2024年发布),在性能与效率间实现平衡。该模型基于改进的Transformer架构,支持128K上下文窗口,擅长复杂推理、数学计算和创意写作,在GSM8K数学基准测试中准确率达92%。其采用"宪法AI"伦理框架,通过多轮对抗训练减少有害输出,同时新增多模态理解能力(可解析图片/图表内容)。Claude 3.7 Sonnet是Anthropic推出的高效轻量级大模型,主打快速响应与成本优化。

Explinks的博客 1497

微信小程序之model弹框

【代码】微信小程序之model弹框。

TC_DESpipi的博客 1956

君正T31x metartc集成测试

metartc为国内杨大侠部分开源的一款用于嵌入式领域webrtc库,它与谷歌官方webrtc相比,编译到君正平台的可执行文件仅有5M即可实现webrtc的通信。1. 目前实现的是基于开源版v5.0-b0版本做的简单修改,官方的好几个版本都多少缺点东西,我这里给整理了一下。目前是局域网连接的webrtc,后续尝试走stun和turn试一下NAT穿越的效果。

fsmpeg的博客 3157

保姆级教程:用ROS2 Humble + Gazebo Classic 从零搭建一个能键盘控制的差分AGV模型

本文提供了一份详细的ROS2 Humble与Gazebo Classic教程,指导用户从零开始搭建一个键盘控制的差分AGV模型。内容涵盖环境配置、Xacro文件设计、Gazebo仿真集成以及键盘控制实现,特别针对常见问题提供解决方案,帮助开发者快速掌握ROS2机器人仿真技术。

weixin_30387423的博客 168

微信小程序(事件对象---绑定、冒泡、捕获)

原生组件 小程序中的部分组件是由客户客户端创建的原生组件,包含: camera canvas input(仅在focus时表现为原生组件) map textarea video 事件冒泡: <view id="parent" bind:tap="parentFn"> <view id="child" bind:tap="childFn"></view> ...

weixin_45343973的博客 1013

机加工机器人系列编程:Fanuc M-710iC_(2).FanucM-710iC机器人的硬件配置

Fanuc M-710iC 机器人是一种广泛应用在汽车零部件制造行业中的工业机器人。它的本体结构设计紧凑、稳定,适用于多种加工任务。了解机器人的本体结构是进行编程和维护的基础。

zhubeibei168的博客 991

微信小程序开发系列(十四)·事件绑定的两种方法以及如何读取事件对象

。第一种方式: bind:事件名, bind后面需要跟上冒号,冒号后面跟上事件名,例如: 第二种方式:bind事件名,bind 后面直接跟上事件名,例如:

时光の尘的博客 3876

SOME/IP协议详解「4.1·经典AutoSAR下的SOME/IP架构」

SOME/IP协议详解「4.1·经典AutoSAR下的SOME/IP架构」 点击返回雪云飞星的SOME/IP协议详解「总目录」 SOME/IP协议详解「4.1·经典AutoSAR下的SOME/IP架构」1 CP的SOME/IP架构概览2 业务报文通信流3 服务发现通信和控制流 1 CP的SOME/IP架构概览 2 业务报文通信流 3 服务发现通信和控制流 点击返回雪云飞星的SOME/IP协议详解「总目录」 ...

雪云飞星的博客 6067

YOLOv8改进策略【注意力机制篇】| CVPRW-2024 分层互补注意力混合层 H-RAMi 针对低质量图像的特征提取模块

许多证据表明层次化网络对图像恢复(IR)任务通常不太有效,因为IR的目标是逐个预测像素值(密集预测),而缩小特征图会丢失重要的像素级信息。然而,层次化结构有降低时间复杂度以及学习语义级和像素级特征表示的优点。为了弥补缺点并利用优点,设计了H - RAMi层。

Limiiiing的博客 377

微信小程序 for,if语法 事件对象,事件传参

小程序里面也有小胡子语法{{}},定义数据需要在js文件的data对象中定义小程序的js里面获取data数据的方式:this.data.变量名修改data里面的数据:this.setData({ 键1:值1...可以一次修改多个数据 })

m0_47045804的博客 1704

【PowerBI专栏】PowerBI导入MYSQL数据库

本文介绍了在PowerBI中连接MySQL数据库的方法。首先需要下载并安装MySQL官方.NET连接驱动(推荐8.4.0版本),安装完成后重启PowerBI。连接时需填写服务器IP和数据库名称等必填参数。文章详细说明了连接配置步骤,包括账户设置、数据表选择以及可能遇到的数据格式转换问题处理。最后指导用户完成数据清洗后进入PowerPivot进行后续计算。特别提醒最新9.4版本可能存在兼容性问题,建议使用稳定的8.4版本连接器。

技术与管理的平衡木- 690

微信小程序:事件对象中属性区分(target和currentTarget等)

1.多个单词由连字符。

weixin_70354927的博客 2048

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

微信小程序的事件对象属性,事件绑定

微信小程序的事件对象属性,事件绑定

xj1216wt的博客 497

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

24.微信小程序(事件对象-绑定、冒泡、捕获)

微信小程序(事件对象-绑定、冒泡、捕获) 组件 原生组件 小程序中的部分组件是由客户端创建的原生组件,包含: ①camera ②canvas ③input(仅在focus时表现为原生组件) ④map ⑤textarea ⑥video 事件冒泡 事件触发验证 事件冒泡验证 点击子级蓝色区域 验证后发现事件发生冒泡,点击子级时,除了触发子级事件,还会冒泡到父级,触发父级绑定的事件 事件冒泡验证 点...

weixin_45582846的博客 344

微信小程序事件对象中e.target和e.currentTarget的区别

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html 什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息,如 id, dataset, touches。 在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentT

编程之美 2202

微信小程序前端模块化解决方案——事件绑定对象中方法

阅读了官方文档,你会发现。微信的事件绑定输入的是字符串。字符串绑定带来的问题包括,把方法堆积在一个js文件里,这是项目开发致命的问题! 事件绑定 原方法 文件树 –pages ----test.js ----test.wxml test.wxml <view bindtap="clickView" catchtap="catchView"></view> test.js Page({ clickView(e){ console.log(e); }, catchView.

MyWay 360

微信小程序(五)bindtap事件传递当前循环到的对象

wxml <i-card wx:for="{{products}}" wx:key="*this" data-product="{{item}}" title="{{item.name}}" bindtap="cardClick" full="true"> <view slot="content">创建时间:{{item.createTime}}</view> </i-card> js Page({ cardClick: fu

杰森写代码 2275
上一篇: Java集合框架-------Map
下一篇: Simditor引入注意事项以及修改接入自己的上传接口
Model_Vincent
博客等级 码龄9年 1粉丝 23原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值