通用事件
事件说明
- 事件绑定在组件上,当组件达到事件触发条件时,会执行JS中对应的事件回调函数,实现页面UI视图和页面JS逻辑层的交互;
- 事件回调函数中通过参数可以携带额外的信息,如组件上的数据对象dataset,事件特有的回调参数。
相对于私有事件,大部分组件都可以绑定如下事件。
名称
|
参数
|
描述
|
是否支持冒泡
|
touchstart
|
TouchEvent
|
手指刚触摸屏幕时触发该事件。
|
是5+
|
touchmove
|
TouchEvent
|
手指触摸屏幕后移动时触发该事件。
|
是5+
|
touchcancel
|
TouchEvent
|
手指触摸屏幕中动作被打断时触发该事件。
|
是5+
|
touchend
|
TouchEvent
|
手指触摸结束离开屏幕时触发该事件。
|
是5+
|
click
|
-
|
点击动作触发该事件。
|
是6+
|
doubleclick7+
|
|
双击动作触发该事件
|
否
|
longpress
|
-
|
长按动作触发该事件。
|
否
|
swipe5+
|
SwipeEvent
|
组件上快速滑动后触发该事件。
|
否
|
attached6+
|
-
|
当前组件节点挂载在渲染树后触发。
|
否
|
detached6+
|
-
|
当前组件节点从渲染树中移除后触发。
|
否
|
pinchstart7+
|
PinchEvent
|
手指开始执行捏合操作时触发该事件。
|
否
|
pinchupdate7+
|
PinchEvent
|
手指执行捏合操作过程中触发该事件。
|
否
|
pinchend7+
|
PinchEvent
|
手指捏合操作结束离开屏幕时触发该事件。
|
否
|
pinchcancel7+
|
PinchEvent
|
手指捏合操作被打断时触发该事件。
|
否
|
dragstart7+
|
DragEvent
|
用户开始拖拽时触发该事件。
|
否
|
drag7+
|
DragEvent
|
拖拽过程中触发该事件。
|
否
|
dragend7+
|
DragEvent
|
用户拖拽完成后触发。
|
否
|
dragenter7+
|
DragEvent
|
进入释放目标时触发该事件。
|
否
|
dragover7+
|
DragEvent
|
在释放目标内拖动时触发。
|
否
|
dragleave7+
|
DragEvent
|
离开释放目标区域时触发。
|
否
|
drop7+
|
DragEvent
|
在可释放目标区域内释放时触发。
|
否
|
说明:
表 1 BaseEvent对象属性列表
属性
|
类型
|
说明
|
type
|
string
|
当前事件的类型,比如click、longpress等。
|
timestamp
|
number
|
该事件触发时的时间戳。
|
表 2 TouchEvent对象属性列表(继承BaseEvent)
属性
|
类型
|
说明
|
touches
|
Array<TouchInfo>
|
触摸事件时的属性集合,包含屏幕触摸点的信息数组。
|
changedTouches
|
Array<TouchInfo>
|
触摸事件时的属性集合,包括产生变化的屏幕触摸点的信息数组。数据格式和touches一样。该属性表示有变化的触摸点,如从无变有,位置变化,从有变无。例如用户手指刚接触屏幕时,touches数组中有数据,但changedTouches无数据。
|
表 3 TouchInfo
属性
|
类型
|
说明
|
globalX
|
number
|
距离屏幕左上角(不包括状态栏)横向距离。屏幕的左上角为原点。
|
globalY
|
number
|
距离屏幕左上角(不包括状态栏)纵向距离。屏幕的左上角为原点。
|
localX
|
number
|
距离被触摸组件左上角横向距离。组件的左上角为原点。
|
localY
|
number
|
距离被触摸组件左上角纵向距离。组件的左上角为原点。
|
size
|
number
|
触摸接触面积。
|
force6+
|
number
|
接触力信息。
|
表 4 SwipeEvent 基础事件对象属性列表(继承BaseEvent)
属性
|
类型
|
说明
|
direction
|
string
|
滑动方向,可能值有:
- left:向左滑动;
- right:向右滑动;
- up:向上滑动;
- down:向下滑动。
|
distance6+
|
number
|
在滑动方向上的滑动距离。
|
表 5 PinchEvent 对象属性列表7+
属性
|
类型
|
说明
|
scale
|
number
|
缩放比例
|
pinchCenterX
|
number
|
捏合中心点X轴坐标,单位px
|
pinchCenterY
|
number
|
捏合中心点Y轴坐标,单位px
|
表 6 DragEvent对象属性列表(继承BaseEvent)7+(Rich)
属性
|
类型
|
说明
|
type
|
string
|
事件名称。
|
globalX
|
number
|
距离屏幕左上角坐标原点横向距离。
|
globalY
|
number
|
距离屏幕左上角坐标原点纵向距离。
|
timestamp
|
number
|
时间戳。
|
事件对象
当组件触发事件后,事件回调函数默认会收到一个事件对象,通过该事件对象可以获取相应的信息。
target对象:
属性
|
类型
|
说明
|
dataSet6+
|
Object
|
组件上通过通用属性设置的data-*的自定义属性组成的集合。
|
示例:
<div>
<div data-a="dataA" data-b="dataB"
style="width: 100%; height: 50%; background-color: saddlebrown;"
@touchstart='touchstartfunc'></div>
</div>
export default {
touchstartfunc(msg) {
console.info(`on touch start, point is: ${msg.touches[0].globalX}`);
console.info(`on touch start, data is: ${msg.target.dataSet.a}`);
}
}