「小程序入门连载文」小程序事件

春哥技术团队:本篇文章讲解“小程序事件”。

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


一、什么是事件?

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

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

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

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

「小程序入门连载文」小程序事件

②编译预览

「小程序入门连载文」小程序事件
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: