小程序 | 10-事件

小程序需要经常和用户进行各种交互，比如，点击界面上的某个按钮或者区域，比如滑动了某个区域；这些交互都会产生各种各样的事件。

通过 bind 或 catch 属性可以将事件绑定到组件上，然后在该页面对应的 Page 构造器（.js 文件）中定义对应的事件处理函数，如果没有对应的函数，触发事件时会报错。当用户和组件产生交互后，就会触发绑定的事件，并调用事件函数，该函数将会受到一个事件对象-event.

1.  事件类型

分为通用事件和特有事件。

• 通用事件：

• 特有事件

如：input 有 bindinput、bindblur、bindfocus 等；scroll-view 有 bindscrolltowpper、bindscrolltolower

2. 事件对象

事件对象中包含如下几种类别的属性：

• BaseEvent 基础事件对象属性列表：

• CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：

• TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：

特殊事件：canvas 中的触摸事件不可冒泡，所以没有 currentTarget。

3. 事件的参数传递

<!--pages/event/event.wxml-->
<view class='container1'>
  <block wx:for="{{titles}}" wx:key="index">
    <!-- 在 data-index 和 data-item 中，末尾的 index 和 item 是我们自定义的 key,这是事件中传递数据的方式 -->
    <view class='item' bindtap="handleItemClick" data-index="{{index}}" data-item="{{item}}">{{item}}</view>
  </block>
</view>

// pages/event/event.js
Page({
data: {
titles: ["张三", "李四", "王五"]
},
handleItemClick(event) {
console.log(event)
// 我们额外传递给事件的数据都在 target 或 currentTarget 的 dataset 中，
const dataset = event.currentTarget.dataset
// dataset.item 中的 item 就是我们在 wxml 中通过 data-item 携带的数据
const title = dataset.item
const index = dataset.index
console.log(title,index)
}
})

/* pages/event/event.wxss */

.container1{
  display: flex;
}

.item{
  flex: 1;
  text-align: center;
}

4. 捕获和传递事件

• capture-bind:tap = "xxx" 用 xxx 函数来监听事件的捕获。

• bindtap = "xxx" 监听事件，并将事件继续传递下去。

• capture-catch:tap = "xxx" 捕获事件并终止传递。

 

关于事件的官方文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

---