08.事件系统

事件类型

小程序中的事件类型分为两类：

• 冒泡型事件：当子组件的事件被触发后，该事件会向父节点传递；
• 非冒泡型事件：当子组件的事件被触发后，该事件会不向父节点传递；

冒泡型事件列表

触摸事件

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0

动画事件

类型	触发条件
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发

3D touch 事件

类型	触发条件	最低版本
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发	1.9.90

非冒泡型事件

表单事件

类型	触发条件
input	键盘输入时触发
focus	输入框聚焦时触发
blur	输入框失焦时触发

绑定事件

小程序中绑定事件的方式有两种：

• bind：不会阻止冒泡
• catch：会阻止冒泡

<view bindtap="sayHello"></view>
<view catchtap="sayHello"></view>

sayHello 是一个事件处理函数的名称。

事件处理函数

小程序中事件处理函数定义在当前页面的 .js 文件中：

Page({
    sayHello() {
        console.log('hello')
    }
})

事件处理函数和 data 等属性同级关系。

事件对象

事件处理函数默认第一个参数就是 event 事件对象。

Page({
    sayHello(event) {
        console.log(event)
    }
})

事件传参

小程序中不能在函数名后加小括号直接传值。小程序中提供了另外两种方式来进行事件传值：

• 自定义属性
• mark（2.7.1 新增）

自定义属性

在绑定事件的元素身上通过 data- 将传递的数据，作为自定义属性添加到元素身上。

<view bindtap="sayHello" data-index="{{index}}"></view>

在事件处理函数中，通过 event 对象来获取事件的值：

Page({
    sayHello(event) {
        console.log(event.currentTarget.dataset); // { index: 1 }
    }
})

mark

在绑定事件的元素身上，通过 mark 设置要传递的参数：

<view bindtap="sayHello" mark:index="{{index}}"></view>

在事件处理函数中，通过 event 对象来获取事件的值：

Page({
    sayHello(event) {
        console.log(event.mark); // { index: 1 }
    }
})

自定义属性和 mark 的区别

mark 会包含从触发事件的节点到根节点上所有的 mark 属性值，而 data- 就只能获取到当前节点身上的 data- 的值。