微信小程序开发系列（十五）·bind 绑定的事件（冒泡事件）、catch 绑定的事件（非冒泡事件）

1. 事件分类

1.1 bind 绑定的事件（冒泡事件）

1.2 catch 绑定的事件（非冒泡事件）

1.3 代码

1. 事件分类

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

冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递，若此时父节点也有绑定事件，则会一并触发。

非冒泡事件：当一个组件的事件被触发后，该事件不会向父节点传递，若此时父节点也有绑定事件，则不会触发父节点的事件。

使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。

1.1 bind 绑定的事件（冒泡事件）

使用bind来监听用户的触摸事件、表单提交事件等。当事件发生时，绑定的事件处理函数会被调用。

找到index.wxml文件，创建一个“line”的类，写入代码：

<view class="line"></view>

找到app.scss文件，对该类进行相关属性的配置：

.line{
  border-top: 10rpx solid lightseagreen;
  margin: 100rpx 0;
}

找到index.wxml文件，创建一个“catch”的类，并创建一个按钮，写入代码：

<view class="catch">
  <button>按钮</button>
</view>

找到index.scss文件，将其定义一个 Flex 容器.catch，将其高度设为300rpx，背景颜色为天蓝色，并且内部的子元素在垂直方向上居中对齐：

.catch{
  // 将 .catch 元素设置为 Flex 布局，使其内部的子元素可以通过弹性布局进行排列。
  display: flex;
  // 设置 .catch 元素的高度为 300rpx
  height: 300rpx;
  // 设置 .catch 元素的背景颜色为天蓝色
  background-color: skyblue;
  // 在 Flex 容器中，设置了交叉轴上的对齐方式为居中，这样内部的元素在交叉轴上（垂直方向）将会居中对齐
  align-items: center;
}

display: flex;: 将 .catch 元素设置为 Flex 布局，使其内部的子元素可以通过弹性布局进行排列。
height: 300rpx;: 设置 .catch 元素的高度为 300rpx，rpx 是一种相对长度单位，常用于小程序开发。
background-color: skyblue;: 设置 .catch 元素的背景颜色为天蓝色。
align-items: center;: 在 Flex 容器中，设置了交叉轴上的对齐方式为居中，这样内部的元素在交叉轴上（垂直方向）将会居中对齐。

找到index.wxml文件，分别对父进程和子进程使用“bind”绑定事件，其中父进程绑定“parentHandler”，子进程绑定“btnHandler”代码如下：

<view class="catch" bind:tap="parentHandler">
  <button bind:tap="btnHandler">按钮</button>
</view>

找到index.js文件，分别对父子节点进行编写触发事件后的显示：

  parentHandler(){
    console.log('父组件绑定的事件')
  },

  btnHandler(){
    console.log('子组件触发的事件')
  },

点击“按钮”可以看到，不仅子节点触发，父节点也触发：

在微信小程序中，可以通过 bind 来绑定事件处理函数，常见的用法是在组件上使用 bind 来监听用户的触摸事件、表单提交事件等。当事件发生时，绑定的事件处理函数会被调用。

例如，可以通过以下方式在一个按钮上绑定一个 tap（点击）事件处理函数：

<button bindtap="handleTap">点击我</button>

在上面的例子中，bindtap 表示绑定了一个 tap 事件处理函数 handleTap。当用户点击按钮时，handleTap 函数会被调用。

另外，还有一些其他常见的事件绑定方式，如 catch 。catch 用于阻止事件向父节点传递，即非冒泡事件的绑定。例如：

<button catchtap="handleTap">点击我</button>

在这种情况下，点击按钮时只会触发当前按钮上的 handleTap 事件处理函数，不会向父节点传递该事件。

1.2 catch 绑定的事件（非冒泡事件）

找到index.wxml文件，将子进程的bind绑定事件改为catch绑定事件：

<view class="catch" bind:tap="parentHandler">
  <button catch:tap="btnHandler">按钮</button>
</view>

此时点击“按钮”，会发现只有子节点触发了，父节点没有进行触发：

1.3 代码

app.scss：

input{
  border: 1px solid #ccc;
}

.line{
  border-top: 10rpx solid lightseagreen;
  margin: 100rpx 0;
}

index.wxml：


<!-- 第一种绑定事件的方式 bind：事件名-->
<button type="primary" bind:tap="handler">绑定事件</button>

<!-- 第二种绑定事件的方式 bind事件名-->
<!-- <button type="primary" type="warn" bindtap="handler">绑定事件</button> -->

<!-- 在小程序中，input输入框默认没有边框，需要自己添加样式 -->
<input type="text" bindinput="getInputVal" />

<view class="line"></view>

<view class="catch" bind:tap="parentHandler">
  <button catch:tap="btnHandler">按钮</button>
</view>

index.js：

// index.js
Page({

  parentHandler(){
    console.log('父组件绑定的事件')
  },

  btnHandler(){
    console.log('子组件触发的事件')
  },

  // 事件处理函数需要写到page()方法中
  handler(event){
    // console.log('事件触发了~~~')
    console.log(event)
  },

  getInputVal(event){
    console.log(event.detail.value)
  }
  // hand(){
  //   console.log('第二种事件触发了~~~')
  // }


})

总结：

冒泡事件：
- 在小程序中，一些事件（如 touch 事件）是支持冒泡的，即当子组件的事件被触发后，该事件会向父节点传递。
- 如果父节点也有绑定相同类型的事件处理函数，则会依次触发这些处理函数。
- 通过冒泡事件，可以实现事件委托和更灵活的事件处理逻辑。
非冒泡事件：
- 另外一些事件（如 input 事件、form 类事件）是不支持冒泡的，即当子组件的事件被触发后，该事件不会向父节点传递。
- 即使父节点有相同类型的事件处理函数，也不会触发父节点上的事件处理函数。