微信小程序的事件机制

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

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

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

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

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

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

- 事件对象可以携带额外信息,如 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进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
3月前
|
小程序 JavaScript
小程序用 rich-text长按复制事件
小程序用 rich-text长按复制事件
152 0
|
3月前
|
小程序
微信小程序怎样给事件传值的
微信小程序怎样给事件传值的
41 0
|
1月前
|
小程序
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
|
1月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 上拉触底(二十六)
【微信小程序】-- 页面事件 - 上拉触底(二十六)
|
1月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 下拉刷新(二十五)
【微信小程序】-- 页面事件 - 下拉刷新(二十五)
|
1月前
|
JSON 小程序 JavaScript
【微信小程序】-- 宿主环境 & 通信模型 & 运行机制介绍(五)
【微信小程序】-- 宿主环境 & 通信模型 & 运行机制介绍(五)
|
4月前
|
小程序
微信小程序onReachBottom事件使用
微信小程序onReachBottom事件使用
148 0
|
7天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
7天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。

热门文章

最新文章