小程序开发基础篇之事件（9）

为什么需要冒泡事件

有了冒泡事件，就可以更加方便的实现一些功能。

比如程序有一个视图，包含用户头像和姓名，当用户点击头像或姓名时，进入用户详情页面。如果没有冒泡事件，就需要处理头像和姓名的点击事件，而现在只需在外层包裹一个组件，并处理该组件的事件即可。

阻止事件冒泡

在有些情况下可能会希望阻止事件的冒泡行为，可以使用catch事件绑定，如catchtap，就可以阻止事件的冒泡行为。

可以通过下面的代码示例来加深对冒泡事件的理解

//.wxml
<view id="outter" bindtap="handleTapOutter">
  我是父亲节点
  <view id="middle" catchtap="handleTapMiddle">
    我是儿子节点
    <view id="inner" bindtap="handleInner">
      我是孙子节点
    </view>
  </view>
</view>

//.js
Page({
  handleTapOutter: function(event) {
    console.log("父亲节点被点击")
  },
  handleTapMiddle: function(event) {
    console.log("儿子节点被点击")
  },
  handleInner: function(event) {
    console.log("孙子节点被点击")
  },
})