2.7.5 小程序的事件系统

当我们在 wxml 文件中定义好相关组件后，需要为定义好的组件绑定对应的事件来响 应用户与页面的交互操作。绑定的事件可以将用户的行为反馈到逻辑层并进行处理，从而 完成视图层到逻辑层的通信。当用户触发事件时，就会执行逻辑层中对应的事件处理函数， 该函数会接收一个事件对象（event）并以它作为参数。该事件对象可以携带额外信息，如 id、dataset、touches 等。

在微信小程序中，事件可以分为冒泡和非冒泡两种类型。其中，冒泡事件是指当一个组件 上的事件被触发后，该事件会向父节点传递；非冒泡事件是指当一个组件上的事件被触发后， 该事件不会向父节点传递。

表 2-19 列出了几个常见的冒泡事件。除该表中的事件之外，如无特殊声明，其他组件 自定义事件（如 form 的 submit 事件、input 的 input 事件、scroll-view 的 scroll 事件等）是 非冒泡事件。

了解了小程序的事件类型后，我们看一下如何给对应的组件绑定事件。我们在组件的属性 中定义一个绑定事件的属性，并设置该属性的值，作为组件的属性，它以 bind 或 catch 开头， 并在其后面加上事件类型字符串。其中，以 bind 开头的事件绑定不会阻止冒泡事件向上冒泡， 以 catch 开头的事件绑定可以阻止冒泡事件向上冒泡。我们来看一个简单的案例，代码清单 2-61 即为 wxml 文件中的代码。

代码清单 2-61

<view class="container">
<button bindtap="clickMe" type="primary">单击</button>
</view>

代码清单 2-62 即为 js 文件中的代码。

代码清单 2-62

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

我们在 index.wxml 页面中定义了一个按钮，指定其类型为 primary，并添加触摸事件，其 事件函数名称为 clickMe。在 index.js 文件中，我们定义了该函数的处理逻辑，即在控制台输 出事件对象 event 的相关内容，如图 2-49 所示。

图2-49 event对象的相关内容

一般情况下，我们可以将控制台显示的所有属性分为 3 种，包括基础事件对象属性 （BaseEvent）、自定义事件对象属性（CustomEvent，继承自 BaseEvent）和触摸事件对象属性 （TouchEvent，继承自 BaseEvent），分别如表 2-20、表 2-21、表 2-22 所示。

最后，解释常用的属性。

type 属性表示事件的类型，其值是一个字符串。图 2-49 中 type 属性的值为 tap，表示对应 的事件处理函数是一个 tap 类型的事件。

timeStamp 属性表示从页面打开到触发事件所经过的毫秒数，其值是一个整数。图 2-49 中 timeStamp 属性的值为 284806，表示从页面打开到触发事件所经历的时长为 284806 ms。

target 对象表示触发事件的源组件，其值是一个对象。从图 2-49 中我们可以知道，target 对象有 4 个属性，如表 2-23 所示。

currentTarget 属性表示事件绑定的当前组件，其值是一个对象。大多数情况下，绑定的组 件的属性、属性值与 target 属性、target 属性值相同，即在大多数情况下，事件绑定的组件和 触发事件的源组件是相同的。

touches 属性表示当前停留在屏幕上的触摸点，其值是一个数组。数组中的每个元素是一 个 Touch 对象。touches 属性分为 3 类，如表 2-24 所示。

detail 属性表示自定义事件所携带的数据，其值是一个对象。单击事件的 detail 带有的 x、 y 同 pageX、pageY 一样，都代表距离文档左上角的水平、垂直距离。