微信小程序事件机制全解析

微信小程序的事件可以分为两大类：冒泡事件（Bubble Events） 和 非冒泡事件（Non-bubble Events）。它们的区别在于是否支持事件冒泡机制。

---

一、冒泡事件（Bubble Events）

定义：

冒泡事件是指事件从子组件向父组件传播的过程，类似于 DOM 的事件冒泡机制。

常见冒泡事件：

• tap（点击）
• longpress / longtap（长按）
• touchstart
• touchmove
• touchend

示例代码：

<!-- index.wxml -->
<view class="parent" bindtap="handleParentTap">
  父容器
  <view class="child" bindtap="handleChildTap">
    子容器
  </view>
</view>

// index.js
Page({
  handleParentTap(e) {
    console.log("父容器被点击");
  },
  handleChildTap(e) {
    console.log("子容器被点击");
    // 阻止事件冒泡到父容器
    e.stopPropagation();
  }
});

/* index.css */
.parent {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  margin: 50px auto;
}

.child {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}

注释说明：

• 使用 bindtap 绑定冒泡事件。
• 在子元素的事件处理函数中使用 e.stopPropagation() 可以阻止事件继续向上冒泡。

---

二、非冒泡事件（Non-bubble Events）

定义：

非冒泡事件不会向上传播，仅在绑定该事件的组件上触发。

常见非冒泡事件：

• catchtap
• catchtouchstart
• catchlongpress

示例代码：

<!-- index.wxml -->
<view class="parent" catchtap="handleParentTap">
  父容器
  <view class="child" catchtap="handleChildTap">
    子容器
  </view>
</view>

// index.js
Page({
  handleParentTap(e) {
    console.log("父容器被点击");
  },
  handleChildTap(e) {
    console.log("子容器被点击");
  }
});

注释说明：

• 使用 catchtap 绑定非冒泡事件，即使不调用 stopPropagation，也不会触发父级的事件。
• 每个 catch 类型的事件都会自动阻止冒泡。

---

三、捕获事件（Capture Events）

定义：

捕获事件是事件流的另一个阶段，在事件冒泡之前先执行捕获阶段的监听器。

语法：

• capture-bind: 用于绑定捕获阶段的事件。
• capture-catch: 用于阻止捕获阶段的事件继续向下传递。

示例代码：

<!-- index.wxml -->
<view class="grandparent" capture-bindtap="handleGrandparentCapture">
  祖父容器
  <view class="parent" capture-bindtap="handleParentCapture" bindtap="handleParentTap">
    父容器
    <view class="child" bindtap="handleChildTap">
      子容器
    </view>
  </view>
</view>

// index.js
Page({
  handleGrandparentCapture() {
    console.log("祖父容器捕获阶段触发");
  },
  handleParentCapture() {
    console.log("父容器捕获阶段触发");
  },
  handleParentTap() {
    console.log("父容器冒泡阶段触发");
  },
  handleChildTap() {
    console.log("子容器被点击");
  }
});

注释说明：

• 使用 capture-bind 可以监听事件在捕获阶段的行为。
• 捕获顺序：从外层到内层依次触发。
• 冒泡顺序：从内层到外层依次触发。

---

四、事件对象（Event Object）

事件对象包含以下常用属性和方法：

属性/方法名	描述
type	事件类型
target	触发事件的组件信息
currentTarget	当前事件所绑定的组件信息
eventPhase	事件阶段（捕获、目标、冒泡）
stopPropagation()	阻止事件继续传播

---

五、事件分类总结表格

分类	关键词	是否冒泡	是否可阻止	典型应用场景
冒泡事件	bind	✅ 是	✅ 是	表单提交、按钮点击等
非冒泡事件	catch	❌ 否	❌ 否	防止父组件干扰子组件行为
捕获事件	capture-bind	✅ 是	✅ 是	复杂交互逻辑中的事件拦截
捕获阻断事件	capture-catch	❌ 否	❌ 否	阻止事件继续向下传递

---

总结

• 使用 bind 开头的事件会冒泡，适合父子组件协同操作。
• 使用 catch 开头的事件不会冒泡，适合独立处理组件内部事件。
• 使用 capture-bind 可以监听事件在捕获阶段的行为，适用于高级交互场景。
• 微信小程序的事件模型与 Web 标准类似，但有其特有语法和行为。

如需进一步了解，请参考 微信小程序官方文档 - 事件系统。