微信小程序 事件_微信小程序 按钮事件

常用事件

如何绑定事件

以 tap 事件为例，事件绑定的写法如下：

<!--
  bind  事件绑定关键字
  tap   事件
  onTap 事件监听函数
-->
<button bindtap="onTap">按钮</button>
1
2
3
4
5
6

基础库 1.5.0 起，事件绑定关键字 和 事件 之间可以用 “:” 连接，含义不变

<!-- bind:tap 和 bindtap 含义相同 -->
<button bind:tap="onTap">按钮</button>
1
2

绑定事件时，可以使用数据绑定的语法

<!-- functionName 的值是 string 类型 -->
<button bind:tap="{{ functionName }}">按钮</button>
1
2

页面的 JS 文件

Page({
  data: {
    functionName: 'onTap'
  },

  onTap(event) {
    console.log('onTap', event)
  }
})
1
2
3
4
5
6
7
8
9

事件绑定关键字

• bind
• catch
• mut-bind
• capture-bind
• capture-catch

bind

基本事件绑定

catch

阻止事件向上冒泡

mut-bind

冒泡过程中，如果有多个使用 mut-bind 绑定事件监听的元素，只有第一个会被触发（基础库 2.8.2）

capture-bind

在捕获阶段触发事件（基础库 1.5.0）

capture-catch

在捕获阶段触发事件，终止后续捕获阶段并取消冒泡阶段（基础库 1.5.0）

事件对象

基础事件的常见属性

触摸事件的常见属性

自定义事件的常见属性

自定义属性

在组件上使用 data- 前缀声明的属性，可以在事件对象中获取到

<!-- 自定义属性 -->
<button data-msg="{{ msg }}" bind:tap="onTap">按钮</button>
1
2

Page({
  data: {
    msg: 'Hello world!'
  },

  onTap(event) {
    // 通过事件对象获取自定义属性的值
    console.log(event.currentTarget.dataset.msg)
  }
})
1
2
3
4
5
6
7
8
9
10

在事件对象中访问自定义属性时，属性名会发生一次转换