当前位置:   article > 正文

微信小程序 【笔记003】小程序的事件处理_微信小程序列举什么是事件,什么是时间处理函数

微信小程序列举什么是事件,什么是时间处理函数

前言:

事件,作为小程序里面非常重要的一个功能必须仔细掌握。在微信官方文档里面已经对事件的说明详细,包括,如何表达,如何使用,3C的介绍也非常详细,但是,排版理解稍有不妥,而且,也是没有结合WEUI的设计实例,所以,结合实例做了一些笔记如此文。


1 什么是事件

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息,如 id, dataset, touches。

2 事件分类

事件分为冒泡事件和非冒泡事件:

  1. 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  2. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

2.1 冒泡事件:

WXML的冒泡事件列表:

类型触发条件最低版本
touchstart手指触摸动作开始 
touchmove手指触摸后移动 
touchcancel手指触摸动作被打断,如来电提醒,弹窗 
touchend手指触摸动作结束 
tap手指触摸后马上离开 
longpress手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发1.5.0
longtap手指触摸后,超过350ms再离开(推荐使用longpress事件代替) 
transitionend会在 WXSS transition 或 wx.createAnimation 动画结束后触发 
animationstart会在一个 WXSS animation 动画开始时触发 
animationiteration会在一个 WXSS animation 一次迭代结束时触发 
animationend会在一个 WXSS animation 动画完成时触发 
touchforcechange在支持 3D Touch 的 iPhone 设备,重按时会触发1.9.90

2.2 非冒泡事件

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如<form/>submit事件,<input/>input事件,<scroll-view/>scroll事件,(详见各个组件)

【案】非冒泡事件大多数是自定义的事件。

参考:监听事件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html?search-key=%E4%BA%8B%E4%BB%B6

上图显示,一个自定义事件的详细情况。其中先在组件的页面里面,设置对组件事件的绑定,其中,

bind:myevent,

bindmyevent

bindmyevent = bind:myevent, bind表示事件绑定的关键字,而 myevent才是事件的名称。

然后应该是在js,文件里面对事件处理函数进行了设计。


3 事件绑定和冒泡

3.1 事件绑定

事件绑定的写法同组件的属性,以 key、value 的形式。

【案】所谓key、value形式,其实就是指key(关键字:bind 、catch)+值(名称)的表示方式。

  • key 以bindcatch开头,然后跟上事件的类型,如bindtapcatchtouchstart。自基础库版本 1.5.0 起,bindcatch后可以紧跟一个冒号,其含义不变,如bind:tap、、catch:touchstart
  • value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

举例:bindtap

3.1.1 当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数

3.1.2 在相应的Page定义中写上相应的事件处理函数

  1. Page({
  2. tapName: function(event) {
  3. console.log(event)
  4. }
  5. })

【案】实例:

 WEUI里面的例子:

<view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">

现在我们回到刚才的那个语句,因为后面还有一个部分没有讲解,bindtap="kindToggle

bindtap 是小程序的一个事件绑定,其中,bind表示绑定,tap表示

手指触摸后马上离开 

kindToggle 是事件处理函数,


3.2 事件冒泡

【案】所谓冒泡,就是指上层的组件对当前组件事件的反应。微信安排了两个事件关键字来区别不同的冒泡应用。

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中,点击 inner view 会先后调用handleTap3handleTap2(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),点击 middle view 会触发handleTap2,点击 outer view 会触发handleTap1

  1. <view id="outer" bindtap="handleTap1">
  2. outer view
  3. <view id="middle" catchtap="handleTap2">
  4. middle view
  5. <view id="inner" bindtap="handleTap3">
  6. inner view
  7. </view>
  8. </view>
  9. </view>

【案】上面的例子,很形象表达了bind 和 catch绑定的事件的不同。


4 事件对象:

微信说明里面对事件对象的定义,只是举例处理几个list,表格,所以,很容易对事件对象是什么,怎么用,为啥要事件对象产生疑惑。 

因为前面我们看到的事件不过是绑定关键字+事件名称,那么如何理解事件对象呢?

如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。 

上文是标准解释,其实很好理解,就是微信里面事件就是一个事件的绑定对象,所以,具备一个对象应有的功能。从一开始的事件定义我们就知道了,其实,事件只有为接受的对象的服务时候,才能绑定组件的同时也携带参数,我们可以理解为一个事件的具备一组属性、行为,那么不就是事件的对象了吗?

后面,我们再讨论一下,对事件对象希望达成透彻理解。

4.1 基础事件对象:

作为事件对象,微信手册里面首先提到的是基础事件,我们看到,这个基础事件的属性列表。

type,事件类型,我们之前的列表已经说明了,有冒泡和非冒泡,其中,冒泡是微信已经定义好的一组列表

timestamp,表示事件的事件戳,这个很好理解


关键是target、currentTarget这两个如何理解?

对此,微信有一段描述解释,

 target 和 currentTarget 可以参考上例中,点击 inner view 时,handleTap3 收到的事件对象 target 和 currentTarget 都是 inner,而 handleTap2 收到的事件对象 target 就是 inner,currentTarget 就是 middle。

 

  1. <view id="outer" bindtap="handleTap1">
  2. outer view
  3. <view id="middle" catchtap="handleTap2">
  4. middle view
  5. <view id="inner" bindtap="handleTap3">
  6. inner view
  7. </view>
  8. </view>
  9. </view>

 我理解为,文中由于冒泡的原因,inner、middle、outer作为事件的触发对象,分别有不同的反馈表现。有的反馈行为是自己本身绑定的事件引起的,这时候就叫currentTarget,否则,就是Target。

target

触发事件的源组件。

属性类型说明
idString事件源组件的id
tagNameString当前组件的类型
datasetObject事件源组件上由data-开头的自定义属性组成的集合

currentTarget

事件绑定的当前组件。

属性类型说明
idString当前组件的id
tagNameString当前组件的类型
datasetObject当前组件上由data-开头的自定义属性组成的集合

其中,在里面有dataset的概念:


dataset

在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。书写方式:以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.target.dataset 中会将连字符转成驼峰elementType

示例:

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
  1. Page({
  2. bindViewTap:function(event){
  3. event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
  4. event.target.dataset.alphabeta === 2 // 大写会转为小写
  5. }
  6. })

上例中,在组件view,中定义了个数据,data-alpha-beta,

然后,定义了一个事件函数,bindviewtap,绑定在tap上,每次点击,会把数据集dataset里面的值进行赋值,也就是传给逻辑层。


4.2  自定义事件对象

所谓,自定义事件对象是继承BaseEvent

CustomEvent 自定义事件对象属性列表(继承 BaseEvent):

属性类型说明
detailObject额外的信息

 其中,

detail

自定义事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息,详见组件定义中各个事件的定义。

点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。


4.3 TouchEvent 触摸事件对象属性列表(继承 BaseEvent):

属性类型说明
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

 其中,

touches

touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。

Touch 对象

属性类型说明
identifierNumber触摸点的标识符
pageX, pageYNumber距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴
clientX, clientYNumber距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴

CanvasTouch 对象

属性类型说明特殊说明
identifierNumber触摸点的标识符 
x, yNumber距离 Canvas 左上角的距离,Canvas 的左上角为原点 ,横向为X轴,纵向为Y轴 

 

changedTouches

changedTouches 数据格式同 touches。表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。


参考:

微信小程序 事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html?search-key=%E4%BA%8B%E4%BB%B6

https://www.w3cschool.cn/weixinapp/weixinapp-event.html

JavaScript事件类型

https://www.cnblogs.com/zhuzhenwei918/p/6142228.html

实例:

 

 


文章欢迎转载,但务必请给出出处。

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/神奇cpp/article/detail/820207
推荐阅读
相关标签
  

闽ICP备14008679号