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

news/2024/7/20 1:56:44 标签: 微信小程序, 小程序

目录

一、事件的概念

二、小程序中常用的事件

三、事件对象的属性列表

四、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.niftyadmin.cn/n/5009336.html

相关文章

笙默考试管理系统-MyExamTest----codemirror(17)

笙默考试管理系统-MyExamTest----codemirror&#xff08;17&#xff09; 目录 一、 笙默考试管理系统-MyExamTest----codemirror 二、 笙默考试管理系统-MyExamTest----codemirror 三、 笙默考试管理系统-MyExamTest----codemirror 四、 笙默考试管理系统-MyExamTest---…

机器学习处理问题的基本路线

基本路线&#xff1a; 1.搭建环境/数据读入 2.数据分析 3.特征工程 4.建模调参 5.模型融合 异常处理&#xff1a; 通过箱线图&#xff08;或 3-Sigma&#xff09;分析删除异常值&#xff1b;BOX-COX 转换&#xff08;处理有偏分布&#xff09;&#xff1b;长尾截断&…

CSDN: ABTest流量分层分桶机制

在互联网行业&#xff0c;无论是构建搜索推荐系统&#xff0c;还是智能营销等场景&#xff0c;都是围绕用户进行不同的实验&#xff0c;从各项指标上观察用户对不同交互、流程、策略、算法等反馈&#xff0c;进而对产品进行迭代改进。 本文的goal&#xff1a;在进行了模型的线下…

C/C++学习网址

1、http://snippets.dzone.com/tag/c/ --数以千计的有用的C语言源代码片段 2、http://www.hotscripts.com/category/c-cpp/scripts-programs/ Hotscripts --提供数以百计的C和C脚本和程序。所有程序都分为不同的类别。 3、http://www.planetsourcecode.com/vb/default.asp?lng…

微服务04-Gateway网关

作用 身份认证&#xff1a;用户能不能访问 服务路由&#xff1a;用户访问到那个服务中去 负载均衡&#xff1a;一个服务可能有多个实例&#xff0c;甚至集群&#xff0c;负载均衡就是你的请求到哪一个实例上去 请求限流功能&#xff1a;对请求进行流量限制&#xff0c;对服务…

UE4实现断线重连功能

断线重连的整体逻辑是 设备离线后&#xff0c;根据需要决定是否保留pawn&#xff0c;还是设备重连后再重新生成一个&#xff0c;然后是断线重连时的验证方式&#xff0c;最后是playerstate重连后的属性保留 重载Playercontroller的PawnLeavingGame,这里是设备断线后&#xff0…

虚函数、纯虚函数、多态

一.虚函数 在基类的函数前加上virtual关键字&#xff0c;在派生类中重写该函数&#xff0c;运行时将会根据所指对象的实际类型来调用相应的函数&#xff0c;如果对象类型是派生类&#xff0c;就调用派生类的函数&#xff0c;如果对象类型是基类&#xff0c;就调用基类的函数。 …

【Redis】Bitmap 使用及应用场景

前言&#xff1a;bitmap 占用空间小&#xff0c;查询效率高&#xff0c;在一些场景中使用 bitmap 是一个很好的选择。 一、bitmap 相关命令 SETBIT - 设置指定位置的比特值&#xff0c;可以设为 1 或 0 例如 SETBIT key 10 1&#xff0c;将在 key 对应的 bitmap 中第10位设置为…