微信小程序的事件机制

简介: 事件机制是一种非常典型的通讯方式,可以在程序中的不同对象之间传递信息,也可以在一个应用的不同层面进行沟通协作。微信小程序中也采用了事件机制,我们这次来了解一下微信小程序框架提供的事件处理机制。

事件机制是一种非常典型的通讯方式,可以在程序中的不同对象之间传递信息,也可以在一个应用的不同层面进行沟通协作。微信小程序中也采用了事件机制,我们这次来了解一下微信小程序框架提供的事件处理机制。

小程序官方文档对事件的定义是:

- 事件是视图层到逻辑层的通信方式

- 事件可以将用户的行为反馈到逻辑层进行处理

- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

- 事件对象可以携带额外信息,如 id, dataset, touches。

从这里我们可以看到,官方文档主要将事件用于小程序中针对用户交互行为的处理,即视图层(WXML)到逻辑层(Page)的通信,逻辑层收到这些用户行为事件后,可以进行业务处理,然后根据情况反馈或不反馈结果给用户。

我们今天就撇开事件的其他用法,专门就来了解小程序视图层和逻辑层之间的事件用法。

总体上来说,小程序中的事件机制在工作原理上来讲,和HTML DOM的事件机制是一致的。在HTML中,我们可以通过在HTML元素上设置一个如onclick="clickHandler(event)"的属性来绑定用户的页面点击事件处理函数。而在WXML中,我们为一个组件绑定一个事件处理函数,可以使用如下语法来完成:

这里的bindtap就可以理解为将tap(点击)事件,绑定到一个名为tapName的事件处理函数上来进行处理。然后在相应的Page代码中,我们需要定义这个tapName函数:

这样完成了一个简单的tap事件的处理。当我们在小程序的界面上去点击这个显示为Click me的view组件的时候,view组件捕获到这个tap动作,然后告诉Page中的tapName函数,要对这个动作进行处理,同时,它也为tapName函数提供了足够多的信息,也就是event对象,来帮助我们更好更精准的处理我们的业务逻辑。我们可以来看一下我们这个例子中的event对象里面包含了哪些内容:

event

这里我们可以看到,在event对象中,包含了事件的名称,事件目标对象的信息,以及事件发生的在界面上的位置信息等等。我们在组件上设置的data-hi属性的值,也在target中的dataset上被携带了过来,这是比较有用的,在实际开发中,我们可以利用这个特性,来传递更多视图层的信息到逻辑层进行处理。

如果你有DOM编程的经验,你就会在这里想到,小程序里事件的冒泡和非冒泡是怎么处理的?如果你还不了解什么是事件冒泡,那我在这里解释一下:

在HTML或者WXML这些基于XML的树形结构的界面布局方式中,元素与元素之间是有层级关系的,子级元素上触发的事件,可以向父级元素逐层向上传递,所以,父级元素上也可以捕获子级元素上的事件并进行逻辑处理。

这种事件冒泡的机制,在实际的开发中也经常会用到,所以我们有必要来了解下在小程序中,是如何来使用冒泡事件的。WXML中分别提供了两种方式,用来绑定事件处理函数:

1. 使用 bind 开头的事件绑定,这种绑定不会阻止冒泡事件向上冒泡

2. 使用 catch 开头的事件绑定,这种绑定可以阻止冒泡事件向上冒泡

直观起见,我们直接来看一个示例代码:

index.wxml


index.wxss


在这个示例代码中,有三个逐级嵌套的view元素,最里层的是content元素,最外层的为outer-container元素。最里层和最外层的元素上,使用了bind属性绑定了tap事件的处理函数,而中间的innner-container上,使用了catch属性进行tap事件绑定。

然后,我们尝试在content上点击一下,可以看到这样的结果:

点击content的结果

content和inner-container元素的tap事件处理函数被执行了,而outer-container元素的没有被执行。这说明在点击content的过程中,产生的tap事件向父级元素传递,而作为content元素的父级元素inner-container, 它使用了能阻止事件冒泡的catch方式,所以它在捕获通过冒泡形式过来的子级元素事件并执行事件处理函数后,让该事件停止向上传递,因此同样是父级元素的outer-contaner,就不再能收到这个冒泡事件了。

然后,来看一下,在不同层级的元素捕获的event对象,在数据方面有什么特点:

我们可以看到,在content的tap事件处理函数中,event里面的target和currentTarget的id都是content。

而在inner-container中的event对象里,target的id为content,而currentTarget的id是inner-content。

由此我们可以知道,event对象中的target是事件产生的源头组件,而currentTarget则是当前捕获这个事件的组件。

event对象中还包含其他一些有用的信息,如touches和changedTouches表示一个或多个手指在屏幕上的触摸位置和变动位置等信息,可以用来实现多点触摸的高级手势处理。

最后,关于事件冒泡,有一点是值得注意一下的:在微信小程序中,并不是所有事件都是冒泡的,从官方文档了解到,<canvas>组件的触摸事件不可冒泡。

目录
相关文章
|
7月前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
211 0
|
7月前
|
小程序 UED 开发者
小程序如何监听页面的滚动事件
小程序如何监听页面的滚动事件
233 0
|
5月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
85 0
|
3月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
3月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
5月前
|
开发框架 前端开发 JavaScript
在微信框架模块中,基于Vue&Element前端的事件和内容的管理
在微信框架模块中,基于Vue&Element前端的事件和内容的管理
|
5月前
|
JavaScript
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
|
7月前
|
小程序
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
|
7月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 上拉触底(二十六)
【微信小程序】-- 页面事件 - 上拉触底(二十六)
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
563 7