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/view38.四.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.
初学者微信小程序开发案例-微信小程序开发框架——事件-微信小程序案例
浏览量:1681
时间:
来源:iheyu
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

最新资讯
-
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
阿坝小程序代理
阿坝藏族羌族小程序代理公司有哪些?阿坝藏族羌族小程序代理平台哪个好?阿坝藏族羌族小程序代理商怎么收费,代理政策如何?下面就让即速应用产品经理jisuapp.cn来告诉你吧!