微信小程序> 初学者微信小程序开发案例-微信小程序开发框架——事件-微信小程序案例

初学者微信小程序开发案例-微信小程序开发框架——事件-微信小程序案例

浏览量:1681 时间: 来源:iheyu

1.一.事件:1.事件是视图层到逻辑层的通讯方式。

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

3.3.事件可以绑定在组件上、触发事件后、就会执行逻辑层中对应的事件处理函数。

4.4.事件对象可以携带额外信息。

5.如何绑定组件上一个事件呢?如图:

6.

7.在index.wxml文件内通过view标签来绑定一个“点击事件”事件名称是"clickMe",在index.js文件内绑定一个"clickMe"的回调函数、在回调函数内打印出来事件所传入事件对象的参数。

8.如图:

9.

10.二.控制台事件对象的所有信息:

11.1、type:它表示触发事件的类型;

12.2、timeStamp:它表示触发事件的当时的一个时间戳;

13.3、target属性:它表示触发事件的一个根源组件包括根源组件的id、以及根源组件的类型,事件根源组件由detail自定义属性的集合;

14.4、currentTarget属性:它表示事件绑定的当前组件包括当前组件的id、当前组件的类型,以及当前组件由detail自定义属性的集合;

15.5、changedTouches属性:值是一个数组、数组每一个元素都是Touches对象,Touches对象表示当前停留在屏幕上的一个触摸点信息;

16.6、currentTouches属性:changedTouches和currentTouches的数据格式是一样的,它表示有变化的触摸点,比如触摸点从无到有或者触摸点位置的变化、以及触摸点从有到无变化:7、detail属性(事件对象):表示所绑定各个事件所携带数据、比如点击事件所携带xy,xy表示触摸点距离文档左上角的一个距离。媒体播放状态事件,它会携带一些媒体播放状态以及事件戳等等。

17.三.小程序事件模型的概念:

18.当我们触发操作之后事件模形会开始处理,在处理过程中会经历三各阶段:1.事件捕获阶段、2.事件处理阶段、3.事件冒泡阶段;1.事件捕获阶段:就是所绑定的事件会从最外层结点向下传播到目标结点元素、一次检查所经过的结点是否绑定同一事件类型的监听回调函数,如果有则执行对应的事件回调函数。

19.2.事件处理阶段:事件在到达目标结点之后、它会触发目标结点所绑定的一个监听回调函数,在事件处理阶段完毕之后,会道一个事件冒泡阶段。

20.3.事件冒泡阶段:事件从目标结点向上冒泡到就外层结点,一次检查所经过的他是否也绑定同一事件类型的监听回调函数,如果有则执行对应的事件回调函数。

21.target属性:表示触发事件的当前组件。

22.currentTarget属性:表示触发事件的根源组件。如图:

23.

24.可捕获事件类型:如图:

25.

26.1、touchstart事件:表示手指在按下屏幕时候的一个事件;

27.2、touchmove事件:表示手指在按下屏幕之后移动的一个事件;

28.3、touchcancel事件:表示手指在上屏幕的时候被来电提醒,或其它事件打断的一个事件;

29.4、touchend事件:表示手指在离开屏幕的一个事件;

30.5、tap事件:表示手指在点击屏幕一次的事件操作(手指在按下到离开小于350毫秒的);

31.6、longpress和longtap事件:都表示手指在按下屏幕之后超过350毫秒,之后在离开的一个事件操作,区别:longtap在触发之后继续触发tap的一个操作,longpress在触发之后不会在触发(推荐使用longpress);

32.可冒泡事件包括可捕获事件类型,还包括动画的事件:如图:

33.7、touchstart:表示我们一个建面动画在结束之后的一个事件;

34.8、animationstart:表示我们一个wxss动画开始的一个事件回调;

35.9、animationiteration:表示wxss动画在执行叠代一次之后的一个调用;

36.10、animationend:表示wxss动画在结束的一个事件的调用;

37.11、touchforcecchang:表示在有一些3DTouch的iphont设备下触发了3DTouch操作之后的一个事件回调;如图:

!--index.wxml--viewclass="container-A"bindtap="clickA"container-Aviewclass="container-B"bindtap="clickB"container-Bviewclass="container-C"bindtap="clickC"container-C/view/view/view

38.四.1、在index.wxml文件内写了三个内容块,container-A包裹了container-B包裹了container-C、对应的事件上通过bindtap属性绑定了,它的一个点击事件;

39.2、container-A对应的是clickA事件;container-B对应的是clickB事件;container-C对应的是clickC事件;

40.3、在index.js文件内写了每个事件一个回调函数,container-A回调函数里面打印了clickcontainer-A的字符串;

41.container-B回调函数里面给控制台打印了clickcontainer-B的字符串;container-C回调函数里面打印了clickcontainer-C的字符串;如图//index.js文件内

Page({clickA(){console.log('clickcontainer-A')},clickB(){console.log('clickcontainer-B')},clickC(){console.log('clickcontainer-C')}})

42.通过点击内容块,控制台打印出怎么样的信息:4、在点击container-C的内容块,控制台分别打印出来,如图:

43.

44.5、在点击container-B的内容块,通过bind是不会阻止冒泡事件阶段,通过capture绑定事件的捕获阶段,通过click阻止对应的冒泡阶段或捕获阶段事件调用,如图:

45.

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎