美文网首页微信小程序
微信小程序(文档)-事件

微信小程序(文档)-事件

作者: 一曲广陵散 | 来源:发表于2016-11-07 10:24 被阅读49次

微信小程序官方文档

一 什么是事件

1  视图层到逻辑层的通讯方式
2  将用户的行为反馈到逻辑层进行处理
3  绑定到组件上,当触发事件,执行逻辑层中对应的事件处理函数
4  事件对象可以携带额外信息

二 事件的使用方式

在组件中绑定一个事件处理函数
在相应的page定义中写上相应的事件处理函数,参数是event

三 事件详解

1 事件分类

事件分为
冒泡事件(当一个组件上的事件被触发后,该事件 会向父节点传递)
和
非冒泡事件(当一个组件的事件被触发后,事件不会向父节点传递)
冒泡事件列表:
touchstart   手指触摸动作开始
touchmove  手指触摸后移动
touchcancel  手指触摸动作被打断
touchend  手指触摸动作结束
tap  手指触摸后马上离开
longtap  手指触摸后,超过350ms后再离开
除了上表中的其他组件无特殊声明都是非冒泡事件

2 事件绑定

事件绑定的写法和组件的属性写法相同,
以key,value的形式
key:以bind或者catch开头,然后跟上事件的类型
value: 是一个字符串,需要在对应的page中定义同名的函数
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件可以阻止

3 事件对象

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

3.1基础事件对象属性列表(BaseEvent)

(1)type (string)

事件类型
代表事件的类型

(2)timeStamp (Integer)

事件生成时候的时间戳
页面打开到触发事件所经过的毫秒数

(3)target (object)

触发事件的组件的一些属性值集合
触发事件的源组件:
id (string) 事件源组件的id
tagName (string) 当前组件的类型
dataset   (object) 事件源组件上由data-开头的自定义属性组成的集合

(4)currentTarget (object)

当前组件的一些属性值集合
事件绑定的当前组件:
id (string) 事件源组件的id
tagName (string) 当前组件的类型
dataset   (object) 事件源组件上由data-开头的自定义属性
dataset(在组件中可以定义数据,这些数据会通过事件传递给SERVICE,
书写方式:以data-开头,多个单词由连字符-链接,
大写会转为小写,连字符-会转为驼峰

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

detail(Object) 额外的信息
自定义事件所携带的数据,
如表单组件的提交事件会携带用户的输入,
媒体的错误事件会携带错误信息

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

(1) touches (Array)

触摸事件,当前停留在屏幕中的触摸点信息的数组,
touches是一个数组,
每个元素为一个Touch对象
(canvas触摸事件中携带的touches是canvasTouch数组),
表示当前停留在屏幕上的触摸点
Touch对象:
identifier (Number) 触摸点的标识符
pageX,pageY (Number) 距离文档左上角的距离,文档的左上角是原点,横向是X轴
clientX, clientY (Number) 距离页面可显示区域(屏幕除去导航条)左上角距离
CanvasTouch对象
identifier(Number)触摸点的标识符
x,y (Number) 距离canvas左上角的距离

(2) changedTouches (Array)

 触摸事件,当前变化的触摸点信息的数组,
 changedTouches数据格式同touches,表示有变化的触摸点,
比如
从无变有touchstart, 
位置变化 touchmove, 
从有变无 touchend, touchcancel

相关文章

网友评论

    本文标题:微信小程序(文档)-事件

    本文链接:https://www.haomeiwen.com/subject/njanuttx.html