事件类型

在编写代码中，使用频率高的事件方式是
单击：tap
长按：longtap
滑动：touchstart、touchmove、touchend、touchcancel

20210327213833755

事件绑定

事件绑定的写法同组件的属性，以 key、value 的形式
①key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtap等。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart
②value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错
③bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

触控事件

（1）触控事件之单击tap

单击事件由touchstart、touchend组成,touchend后触发tap事件
tap顺序为touchstart→touchend→tap

<button type="primary" bindtouchstart="bindtouchstartFn" bindtouchend="bindtouchendFn" bindtap="bindtapFn">点击</button>

bindtouchstartFn(event){
    console.log(event.timeStamp + ' - touchstart');
},
bindtouchendFn(event){
    console.log(event.timeStamp + ' - touchend');
},
bindtapFn(event){
    console.log(event.timeStamp + ' - tap');
},

// 打印
15094 - touchstart
15179 - touchend
15180 - tap

（2）触控事件之双击

双击事件可以由两个单击事件组成，只要两次点击的间隔时间小于600ms（或者300ms）则认为是双击行为；
顺序：
双击执行顺序为touchstart → touchend → tap → touchstart → touchend → tap

<button type="primary" bindtap="bindtapFn">点击</button>

data:{
    // 最后触摸页面时的距离页面打开的毫秒数，默认为0
    lastTimeStamp: 0
},

bindtapFn(event){
    const timeStamp = event.timeStamp; // 触摸时的时间戳
    const lastTimeStamp = this.data.lastTimeStamp; // 最后触摸屏幕距离加载的时间
    if(lastTimeStamp > 0){
        // 不是第一次触摸
        if(timeStamp - lastTimeStamp < 300){
            // 双击事件
        }
    }else{
        // 第一次触摸
    }
    this.setData({
        lastTimeStamp : timeStamp
    });
},

（3）触控事件之长按longtap

长按事件手指触摸后，超过350ms再离开，触发长按事件longtap
“longtap”事件已弃用，请改用“longpress”事件

（4）触控事件之长按longpress

<button type="primary" bindtouchstart="bindtouchstartFn"  bindlongpress="bindlongpressFn" bindtouchend="bindtouchendFn" bindtap="bindtapFn">点击</button>

// 打印
①长按后控制台输出
2513 - touchstart
2869 - longpress
4015 - touchend

②单击时控制台输出
98681 - touchstart
98767 - touchend
98768 - tap

事件冒泡

<view id="parent" bindtap="parentFn">
    <view id="child" bindtap="childFn"></view>
</view>

parentFn(event){
    console.log(event);
},
childFn(event){
    console.log(event);
},

#parent{
    width:200rpx;
    height:200rpx;
    background:red;
}

#child{
    width:100rpx;
    height:100rpx;
    background:blue;
}

20210327213833756

事件冒泡验证
点击子级蓝色区域
验证后发现事件发生冒泡，点击子级时，除了触发子级事件(childFn)，还会冒泡到父级(parentFn)，触发父级绑定的事件

点击父级红色区域
点击父级红色区域时，只会触发父级绑定的事件(parentFn)

target和currentTarget 属性区别：
currentTarget为当前事件所绑定的组件
target是触发该事件的源头组件

事件捕获

事件流包含事件冒泡与捕获，通过bind绑定会发生冒泡，catch则会阻止冒泡传播。

<view id="parent" bind:tap="fn1" capture-bind:tap="fn2">
    <view id="child" bind:tap="fn3" capture-bind:tap="fn4"></view>
</view>

fn2
fn4
fn3
fn1

由此可以验证出捕获优先级高于冒泡。
注意：捕获阶段要求bind和catch后紧跟一个冒号，如bind:tap、catch:touchstart

事件对象

当事件回调触发的时候，逻辑层绑定该事件的处理函数会收到一个事件对象，对象的详细属性如下， 20210327213833757