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

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。 -

零代码 + AI 双轮驱动|即速应用解锁人工智能小程序开发新范式
无需代码、无需 AI 算法功底,普通人也能快速搭建智能小程序。即速应用将人工智能与零代码开发深度融合,推出 AI 智能生成能力,用户通过自然语言描述需求,AI 自动生成小程序页面、功能模块与后台配置,覆盖商城、预约、同城、社区团购等全场景。平台内置 AI 智能推荐、智能客服、用户画像分析等能力,一键对接微信生态,打通视频号、企业微信、短信跳转,帮企业快速落地 AI 应用,抢占智慧经营先机,让每家企业都拥有 AI 驱动的智慧店铺。












