事件
2018-12-17 本文已影响0人
阿彤呀呀
(一)在组件中绑定一个事件处理函数
bindtap
(二)微信冒泡事件
- touchstart
手指触摸动作开始
- touchmove
手指触摸后移动
- touchcancel
手指触摸动作被打断,如来电提醒,弹窗
- touchend
手指触摸动作结束
- tap
手指触摸后马上离开
- longtap
手指触摸后,超过350ms再离开
(三)事件绑定:
- 事件绑定的写法同组件的属性,以key、value的形式
- key以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart
- value是一个字符串,需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错
- bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡
(四)事件对象
- (1)BaseEvent基础事件对象
- type---事件类型
- timeStamp---事件生成时的时间戳
- target---触发事件的组件的一些属性值集合
- currentTarget---当前组件的一些属性值集合
- (2)CustomEvent 自定义事件对象
- detail---额外的信息
- (3)TouchEvent 触摸事件对象
- touches---触摸事件,当前停留在屏幕中的触摸点信息的数组
- changedTouches---触摸事件,当前变化的触摸点信息的数组
(五)属性
- (1)type:通用事件类型
- (2)timeStamp:该页面打开到触发事件所经过的毫秒数。
- (3)target:触发事件的源组件
- id---事件源组件的id
- tagName---当前组件的类型
- dataset---事件源组件上由data-开头的自定义属性组成的集合
- (4)currentTarget:事件绑定的当前组件
- id---事件源组件的id
- tagName---当前组件的类型
- dataset---事件源组件上由data-开头的自定义属性组成
- (5)dataset
以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)
data-element-type,最终在 event.target.dataset 中会将连字符转成驼峰elementType。
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
bindViewTap:function(event){
event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.target.dataset.alphabeta === 2 // 大写会转为小写
}
})
- (6)touches
touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。
- Touch 对象
- identifier---触摸点的标识符
- pageX, pageY---距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴
- clientX, clientY---距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴
- CanvasTouch 对象
- identifier---触摸点的标识符
- x, y---距离 Canvas 左上角的距离,Canvas 的左上角为原点 ,横向为X轴,纵向为Y轴
- (7)changedTouches
changedTouches 数据格式同 touches
- touchstart---从无变有
- touchmove---位置变化
- touchend、touchcancel---从有变无
- (8)detail
点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。