微信小程序官方文档
一 什么是事件
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