概述

事件是视图层到逻辑层的通讯方式，可以将用户的行为反馈到逻辑层进行处理

事件分为冒泡事件和非冒泡事件：

  1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递（触发父节点的事件）
  2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递

代码实现

简单事件绑定

页面wxml代码，text标签实时显示num的值，两个按钮分别绑定num加1和num减1事件

1
2
3
4
5
6
7
<view style="text-align: center;">
    <text style="color: red;font-size: 18px;">{{num}}</text>
</view>
<view style="text-align: center;">
    <button bindtap="add" size="mini">加1</button>
    <button bindtap="reduce" size="mini" style="margin-left: 20px;">减1</button>
</view>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// pages/demo/demo.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        num: 5
    },
	// 加1
    add() {
        this.setData({
            num: this.data.num + 1
        })
    },
	// 减1
    reduce() {
        this.setData({
            num: this.data.num - 1
        })
    }
})

效果

冒泡事件

bindtap会让事件向父节点冒泡

页面wxml代码，outer是middle的父节点，middle是inner的父节点

1
2
3
4
5
6
7
8
<text style="color: red;">bindtap冒泡</text>
<view bindtap='handout'>
   outer
   <view bindtap='handmiddle'>
     middle
     <view bindtap='handinner'>inner</view>
   </view>
 </view>

js代码

1
2
3
4
5
6
7
8
9
10
11
handout: function () {
	console.log("out");
},

handmiddle: function () {
	console.log("middle");
},

handinner: function () {
	console.log("inner");
}

效果

分析

  1. 点击outer时，只会触发它本身的事件handout事件，即：只触发了handout事件
  2. 点击middle时，触发它本身的事件handmiddle事件后，向其父节点outer冒泡触发handout事件，即：依次触发了handmiddle、handout事件
  3. 点击inner时，触发它本身的事件handinner事件后，向其父节点middle冒泡触发handmiddle事件（相当于点击了middle），最后触发了handout事件，即：依次触发了handinner、handmiddle、handout事件

非冒泡事件

catchtap会阻止事件向父节点冒泡

页面wxml代码

1
2
3
4
5
6
7
8
<text style="color: red;">catchtap非冒泡</text>
 <view catchtap='handout'>
   outer
   <view catchtap='handmiddle'>
     middle
     <view catchtap='handinner'>inner</view>
   </view>
 </view>

js代码

和上面一样

效果

分析

因为catchtap是阻止向父节点冒泡的，所以点击outer、middle、inner都只会触发自身的事件，catchtap的事件可以被子节点触发

PS.

微信开发文档地址：事件 | 微信开放文档 (qq.com)