微信小程序开发---事件的绑定

news2024/9/30 9:23:59

目录

一、事件的概念

二、小程序中常用的事件

三、事件对象的属性列表

四、bindtap的语法格式

(1)绑定tap触摸事件

(2)编写处理函数

五、在事件处理函数中为data中的数据赋值

六、事件传参

七、bindinput的语法格式

八、实现文本框和data之间的数据同步


一、事件的概念

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。

二、小程序中常用的事件

类型   绑定方式                      描述
tap    bindtap或bind:tap           手指触摸后马上离开,类似于HTML中的click事件 
input  bindinput或bind:input       文本框的输入事件 
change bindchange或bind:change     状态改变时触发 

三、事件对象的属性列表

当事件回调触发的时候,会收到一个事件对象event,他的详细属性如下表所示

属性            类型      说明
type           string    事件类型
timeStamp      Integer   页面打开到触发事件所经过的毫秒数
target         Object    触发事件的组件的一些属性值集合
currentTarget  Object    当前组件的一些属性集合
detail         Object    额外的信息
touches        Array     触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches Array     触摸事件,当前变化的触摸点信息的数组

注意:

target和currentTarget的区别

target是触发该事件的源头组件,而currentTarget是当前事件所绑定的组件。

举例如下:

点击了按钮后,点击事件会以冒泡的方式向外扩散,也会触发外层的view的tap事件处理函数,对于view来说:

e.target就是指触发事件的源头组件

e.currentTarget就是当前正在触发事件的那个组件,也就是view

四、bindtap的语法格式

在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为。一般分为两步:

(1)通过bindtap,可以为组件绑定tap触摸事件

(2)在页面的js文件中定义对应的事件处理函数,事件参数通过形参event(一般简写成e)来接受

(1)绑定tap触摸事件

<view>
 <button type="primary" bind:tap="hanshu">按钮</button>
</view>

(2)编写处理函数

//js文件中
hanshu(e){
    console.log('666')
 }

五、在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法,可以给页面中data中的数据重新赋值

案例:制作一个按钮,点击他之后,count+1,并将count值显示在页面

//js文件
 hanshu(e){
   this.setData({
     count:this.data.count+1
   })
 }



<view>
 <view>count={{count}}</view>
 <button type="primary" bind:tap="hanshu">点击我count+1</button>
</view>

六、事件传参

小程序中的传参不能在绑定事件的同时为事件处理函数传递参数,如下将是不正确的。

<button bind:tap="hanshu(123)">按钮</button>

因为小程序会将bintap的属性值全部当成事件名称来处理,相当于要调用一个名称是hanshu(123)的事件处理函数。

但是我们可以为组件提供data-*自定义属性传参,其中*代表的是参数的名字,如下:

<view>
 <view>count={{count}}</view>
 <button type="primary" bind:tap="hanshu" data-i="{{10}}">点击我count</button>
</view>

data后面的i可以自己取名称,i会被解析成参数的名字,10是参数的值,在事件处理函数中,通过event.target.dataset.参数名称也就是event.target.dataset.i可以获取参数的值。

 hanshu(e){
   this.setData({
     count:this.data.count+e.target.dataset.i
   })
 }

七、bindinput的语法格式

在小程序中,通过input事件来响应文本框的输入事件,语法格式如下

(1)通过bindinput可以为文本框绑定输入事件


<view>
  <input bindinput="handl" />
</view>

(2)在js文件处理事件函数

handl(e){
    console.log(e.detail.value)
  },

八、实现文本框和data之间的数据同步

handl(e){
    this.setData({
      msg:e.detail.value
    })
  },


<input bindinput="handl" value="{{msg}}" />

<view>msg={{msg}}</view>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/984092.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微服务框架:一招实现降本、提质、增效办公!

应用什么样的软件平台&#xff0c;可以帮助企业朋友提高办公协作效率&#xff1f;传统的办公方式已经无法满足日益增长的业务需求了&#xff0c;借助低代码技术平台和微服务框架&#xff0c;可以让繁琐的办公轻松化&#xff0c;更高效、快捷、便利地满足客户的办公需求。 在众多…

分布式光伏消纳的微电网群共享储能配置策略研究——Matlab代码复现

目录 摘要&#xff1a; 研究背景&#xff1a; 共享储能参与微能源网新能源消纳模式&#xff1a; 共享储能电站容量功率配置原则&#xff1a; Matlab算例运行结果&#xff1a; ​编辑 Matalb代码数据分享&#xff1a; 摘要&#xff1a; 共享储能是可再生能源实现经济消纳…

Undefined symbols for architecture arm64

解决问题之前&#xff0c;先了解清晰涉及到的知识点&#xff1a; iOS支持的指令集包含&#xff1a;armv6、armv7、armv7s、arm64&#xff0c;在项目TARGETS---->Build Settings--->Architecturs 可以修改对应的指令集&#xff0c;目前Standard Architectures(arm64, arm…

【数据分享】2006-2021年我国省份级别的道路、桥梁、管线建设相关指标(10多项指标)

《中国城市建设统计年鉴》中细致地统计了我国城市市政公用设施建设与发展情况&#xff0c;在之前的文章中&#xff0c;我们分享过基于2006-2021年《中国城市建设统计年鉴》整理的2006—2021年我国省份级别的市政设施水平相关指标、2006-2021年我国省份级别的各类建设用地面积数…

GNSS融合策略

文章目录 一、背景二、松耦合融合策略1. 信息有效性判断2. 坐标系对齐3. 观测方程a.杆臂补偿b.速度融合c.位置融合d. 航向yaw融合e.观测性分析1&#xff09;状态表示在VIO坐标系下的观测性分析2&#xff09;状态表示在GPS ENU坐标系下的观测性分析 一、背景 前面介绍了GNSS的定…

Dos系统的Debug工具简单使用(2023.9.7)

先看说明书&#xff1a; 文章目录 分项操练-A-C-D-E-F-G-H-I-L-M-N-O-P-Q-R-S-T-U-W-XA-XD-XM-XS-&#xff1f; 分项操练 -A 全称&#xff1a;assemble&#xff08;汇编&#xff09; 作用&#xff1a;给定地址范围&#xff0c;写入汇编命令 格式&#xff1a;-a 首地址 如果…

常用echart图总结

柱状图 - category-work,grid直角坐标,legend,series-bar柱状图,tooltip提示框 - makeapie echarts社区图表可视化案例

制造企业如何优化物料控制?

导 读 ( 文/ 2127 ) 物料控制是指对制造过程中所涉及的物料流动和库存进行有效管理和控制的过程。它包括物料需求计划、供应商管理、物料采购、物料接收和入库、物料库存管理以及物料发放和使用等关键环节。通过精确的物料需求计划和库存管理&#xff0c;物料控制可以确保物料供…

达之云BI平台助力融通集团陕西军民服务社有限公司实现数字化运营

中国融通集团陕西军民服务社是一家大型综合类零售购物中心&#xff0c;公司目前管理系统运行了10年左右&#xff0c;面临系统新零售支持发展严重滞后&#xff0c;行业主流应用落地困难&#xff0c;如线上业务、到家业务、全渠道营销、电子发票、自助收银、扫码购、无感停车、未…

【C++ Core Guidelines解析】深入理解现代C++的特性和原理

文章目录 &#x1f468;‍⚖️《C Core Guidelines解析》的主要观点&#x1f468;‍&#x1f3eb;《C Core Guidelines解析》的主要内容&#x1f468;‍&#x1f4bb;作者介绍 &#x1f338;&#x1f338;&#x1f338;&#x1f337;&#x1f337;&#x1f337;&#x1f490;&a…

城市区县级数字孪生智慧水务信息化建设思考

随着水利部近几年对数字孪生水利建设的不断推进&#xff0c;区县级水司建设数字孪生智慧水务已经成为当前水务管理的重要发展趋势。智慧水务通过信息技术手段提高水务管理的效率和精度&#xff0c;实现水资源的合理利用和保护。本文将探讨区县级水司建设智慧水务的思考&#xf…

华为三层交换机与路由器对接上网

华为三层交换机与路由器对接上网

Python标识符命名规范

简单地理解&#xff0c;标识符就是一个名字&#xff0c;就好像我们每个人都有属于自己的名字&#xff0c;它的主要作用就是作为变量、函数、类、模块以及其他对象的名称。 Python 中标识符的命名不是随意的&#xff0c;而是要遵守一定的命令规则&#xff0c;比如说&#xff1a;…

2023外贸SEO推广怎么做?

答案是&#xff1a;2023外贸SEO推广可以选择谷歌SEO谷歌Ads双向运营。 外贸SEO的核心要素 外贸SEO不仅仅是关于关键词排名&#xff0c;它更多的是关于品牌建设和目标受众的吸引。 要想成功&#xff0c;必须认识到几个关键要素。 了解目标市场 首先&#xff0c;要深入了解目…

数字电路-基础

数字信号的概念 数字电路:对数字信号进行传送、逻辑运算、控制、计数、寄存、显示等的电路。 分析方法:逻辑代数 数字电路的特点、发展概况 1.特点:结构简单,容易制造、便于集成化; 精度高、可靠性好; 能进行逻辑运算和逻辑判断等(也称数字逻辑电路)。 2.发展概况: Multisim…

港陆证券:突然崩了!科技股大跌,苹果蒸发超7000亿

当地时间9月6日&#xff0c;美股三大指数齐跌&#xff0c;苹果等科技股重挫。 美国8月ISM服务业指数超预期升至54.5的半年新高&#xff0c;连续8个月扩张&#xff0c;工作指数升至2021年11月来最高&#xff0c;新订单指数也创6个月新高&#xff0c;但反映通胀的付出指数创4个月…

详解 Cent OS JDK 8.0 安装配置

环境配置 云服务器云耀云服务器L操作系统CentOS 7.9 64bit | 公共镜像JDK版本64 bit JDK 1.8 下载地址 JDK官网下载地址Java Downloads | Oraclehttps://www.oracle.com/java/technologies/downloads/#java8百度网盘 ARM64 链接&#xff1a;https://pan.baidu.com/s/1wQ1mp…

IIS WebDAV配置,https绑定及asp设置

IIS支持标准CGI&#xff0c;因此可以用程序语言针对STDIN和STDOUT开发。 IIS CGI配置和CGI程序FreeBasic, VB6, VC 简单样例_Mongnewer的博客-CSDN博客 IIS支持脚本解释CGI&#xff0c;因此可以用脚本语言针对STDIN和STDOUT开发。 IIS perl python cbrother php脚本语言配置…

React 消息文本循环展示

需求 页面上有个小喇叭&#xff0c;循环展示消息内容 逻辑思路 设置定时器&#xff0c;修改translateX属性来实现滚动&#xff0c;判断滚动位置&#xff0c;修改list位置来实现无限滚动 实现效果 代码 /** Author: Do not edit* Date: 2023-09-07 11:11:45* LastEditors: …

【操作系统】银行家算法

概念 当一个进程申请使用资源的时候&#xff0c;银行家算法通过先 试探 分配给该进程资源&#xff0c;然后通过安全性算法判断分配后的系统是否处于安全状态&#xff0c;若不安全则试探分配作废&#xff0c;让该进程继续等待。 那么此时会有一个问题&#xff0c;如何判断系统是…