【小程序开发教程系列11】入门篇之小程序事件

今天春哥技术团队大东继续为大家更新关于小程序开发教程系列文章,上一篇讲解“ 注册页面——页面相关事件处理函数”,本篇文章讲解“小程序事件”。


一、什么是事件?

事件是视图层到逻辑层的通讯方式。

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

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

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


二、事件分类

事件分为冒泡事件和非冒泡事件:

1)冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。

2)非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

WXML的冒泡事件列表:

注意:

1. 除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件。


三、事件的绑定和冒泡

事件绑定的写法同组件的属性,以key、value的形式。

key以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。自基础库版本1.5.0起,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、、catch:touchstart。

value是一个字符串,需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。


举例说明事件的绑定(冒泡和非冒泡):

1. bindtap

bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

1)bindtap的使用

①在button按钮上添加bindtap事件,点击按钮时触发相应的处理函数(tst.wxml文件)

②在tst.js文件中创建query处理函数

③编译预览

注意:

1. 事件处理函数的位置在页面的js文件下Page中,与data、onLoad等隶属同一级别。

2. 事件处理函数参数为event(事件对象),为json对象,json对象中保存事件的相关信息。

2)冒泡

①为按钮添加一个父级,并在父级添加事件

②编译预览

点击按钮时,触发按钮上的事件,向上冒泡触发view上的事件,输出两个事件对象。

3)事件对象参数信息

如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。在事件对象中有很多的属性,其中有几个常用的属性。

BaseEvent基础事件对象属性列表:

①事件对象信息:

注意:

1. target属性为事件源信息。

2. currentTarget为当前事件对象信息。

②currentTarget属性下的属性列表

③target属性下的属性列表

4)dataset

在组件中可以定义数据,这些数据将会通过事件传递给SERVICE。书写方式:以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在event.currentTarget.dataset中会将连字符转成驼峰elementType。

①在button按钮上添加dataset数据(tst.wxml)

编译预览:

②获取标签绑定的数据(tst.js)

编译预览:

注意:

1. 在标签上以“data-”形式绑定数据,并在事件对象的currentTarget属性下的dataset属性中获取数据。

2. 定义的data-形式不能有大写字母,多个单词由“-”连接,最终在dataset属性下显示的形式转为驼峰式,如“data-name-sex”转为“nameSex”。


2. catchtap

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

①将button上的bind事件改为catch事件,阻止冒泡

②编译预览



春哥团队独家打造的春哥小程序开发平台V1.2源码系统已经正式发布了,功能非常强大,用此款源码系统可以分分钟搭建出强大的小程序开发平台,无需编程,小白也可以开发小程序,轻轻松松接单赚钱

 
来源:春哥技术博客,欢迎分享,(春哥微信号:cgnanyin)
上一篇:小程序重启耗时过久,请确认业务逻辑中      下一篇:微信小程序云开发尝鲜初体验