卓象程序员 | 哈尔滨IT培训 | 品质教育,口碑传承 | 为做出口口相传,好口碑的教育品牌而奋斗!

卓象程序员让每一位学员高薪就业 联系我们13101507057

加微信,了解详情
您所在的位置:首页 > 文章 >小程序连载

「小程序入门连载十三」小程序事件
时间: 2018-11-08 16:21:00     来源: 卓象IT实训基地【原创】

上一篇文章讲解将注册页面讲解完毕,本篇文章讲解“小程序事件”。


一、什么是事件?

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

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

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

事件对象可以携带额外信息,如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事件,阻止冒泡

「小程序入门连载十三」小程序事件


②编译预览

「小程序入门连载十三」小程序事件


「小程序入门连载十三」小程序事件


小程序事件结束

关注卓象程序员,定期发布技术文章

下一篇文章讲解“小程序列表渲染+设置获取数据”

「小程序入门连载十三」小程序事件