《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.5 小程序的事件系统

简介: 《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.5 小程序的事件系统

2.7.5 小程序的事件系统


当我们在 wxml 文件中定义好相关组件后,需要为定义好的组件绑定对应的事件来响 应用户与页面的交互操作。绑定的事件可以将用户的行为反馈到逻辑层并进行处理,从而 完成视图层到逻辑层的通信。当用户触发事件时,就会执行逻辑层中对应的事件处理函数, 该函数会接收一个事件对象(event)并以它作为参数。该事件对象可以携带额外信息,如 id、dataset、touches 等。


在微信小程序中,事件可以分为冒泡和非冒泡两种类型。其中,冒泡事件是指当一个组件 上的事件被触发后,该事件会向父节点传递;非冒泡事件是指当一个组件上的事件被触发后, 该事件不会向父节点传递。


表 2-19 列出了几个常见的冒泡事件。除该表中的事件之外,如无特殊声明,其他组件 自定义事件(如 form 的 submit 事件、input 的 input 事件、scroll-view 的 scroll 事件等)是 非冒泡事件。


image.png


image.png


了解了小程序的事件类型后,我们看一下如何给对应的组件绑定事件。我们在组件的属性 中定义一个绑定事件的属性,并设置该属性的值,作为组件的属性,它以 bind 或 catch 开头, 并在其后面加上事件类型字符串。其中,以 bind 开头的事件绑定不会阻止冒泡事件向上冒泡, 以 catch 开头的事件绑定可以阻止冒泡事件向上冒泡。我们来看一个简单的案例,代码清单 2-61 即为 wxml 文件中的代码。


代码清单 2-61


<view class="container">
<button bindtap="clickMe" type="primary">单击</button>
</view>

代码清单 2-62 即为 js 文件中的代码。


代码清单 2-62

Page({
clickMe(event){
console.log(event)
}
})

我们在 index.wxml 页面中定义了一个按钮,指定其类型为 primary,并添加触摸事件,其 事件函数名称为 clickMe。在 index.js 文件中,我们定义了该函数的处理逻辑,即在控制台输 出事件对象 event 的相关内容,如图 2-49 所示。


image.png


图2-49 event对象的相关内容


一般情况下,我们可以将控制台显示的所有属性分为 3 种,包括基础事件对象属性 (BaseEvent)、自定义事件对象属性(CustomEvent,继承自 BaseEvent)和触摸事件对象属性 (TouchEvent,继承自 BaseEvent),分别如表 2-20、表 2-21、表 2-22 所示。


image.png
image.png



最后,解释常用的属性。


type 属性表示事件的类型,其值是一个字符串。图 2-49 中 type 属性的值为 tap,表示对应 的事件处理函数是一个 tap 类型的事件。


timeStamp 属性表示从页面打开到触发事件所经过的毫秒数,其值是一个整数。图 2-49 中 timeStamp 属性的值为 284806,表示从页面打开到触发事件所经历的时长为 284806 ms。


target 对象表示触发事件的源组件,其值是一个对象。从图 2-49 中我们可以知道,target 对象有 4 个属性,如表 2-23 所示。


image.png


currentTarget 属性表示事件绑定的当前组件,其值是一个对象。大多数情况下,绑定的组 件的属性、属性值与 target 属性、target 属性值相同,即在大多数情况下,事件绑定的组件和 触发事件的源组件是相同的。


touches 属性表示当前停留在屏幕上的触摸点,其值是一个数组。数组中的每个元素是一 个 Touch 对象。touches 属性分为 3 类,如表 2-24 所示。


image.png


detail 属性表示自定义事件所携带的数据,其值是一个对象。单击事件的 detail 带有的 x、 y 同 pageX、pageY 一样,都代表距离文档左上角的水平、垂直距离。



相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
4天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
18 3
|
10天前
|
小程序
|
11天前
|
小程序 数据安全/隐私保护
|
10天前
|
小程序
|
14天前
|
小程序
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
461 7
|
30天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
517 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
111 7