目录
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 类事件）是不支持冒泡的，即当子组件的事件被触发后，该事件不会向父节点传递。
- 即使父节点有相同类型的事件处理函数，也不会触发父节点上的事件处理函数。
