小程序事件处理

事件

事件就是用户到界面(视图)的交互行为,移动端常见的交互行为(触屏,触摸移动,长按,键盘,多点触控,摇一摇,各种状态事件,...,重按)

事件绑定

在小程序中绑定事件使用bind(不会阻止冒泡),catch

capture-bind使用捕获、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段

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

两种写法
    bind:tap  bindtap
    catch:tap  catchtap

例如:<view bindTap='{{clickFn}}'></view>

**在page.js中**
Page({
    clickFn(event){
        console.log(event)
    }
})

事件分类

事件分为冒泡事件和非冒泡事件
    1.冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。(点击、移动、触摸打断touchcancel,tap轻按,longpress长按,longtap长按,transitionstart,animationiteration迭代结束,动画监听)
    2.非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。(例如:表单相关事件、加载相关事件)

交互事件

触摸  touchstart
移动  touchmove
打断  touchcancel
离开  touchend
轻触  tap
长按(超过350ms)  longtap  longpress
重按(3D Touch 设备) touchforcechange

**监听事件**
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发	
animationiteration	会在一个 WXSS animation 一次迭代结束时触发	
animationend	会在一个 WXSS animation 动画完成时触发	
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

Event对象

{
    type:事件类型,
    timeStamp:时间戳,
    target:触发事件的组件的属性值的集合{
        id:事件源组件id,
        tagName:当前组件的类型,
        dataset:事件源组件上由data-开头的自定义属性组成的集合
    },
    currentTarget:当前组件的一些属性值集合,
    detail:额外信息{x,y}触摸点的位置,
    touches:手指列表,
    changedTouches:移动了的手指信息
}