> ## 1.事件冒泡 1.首先我们先修改下启动界面，启动界面创建三个view组件，分别给他们对应的样式和绑定他们的点击事件，且布局是一层嵌套一层的 ``` <view class='parent' bindtap="clickParent"> 界面一 <view class='child' bindtap="clickChild"> 界面二 <view class='grandson' bindtap="clickGrandson"> 界面三 </view> </view> </view> ``` 2.然后在index.wxss文件中写下他们对应的样式 ``` .parent{ width: 100%; height: 500rpx; background: pink; } .child{ width: 80%; height: 300rpx; background: yellowgreen; } .grandson{ width: 60%; height: 150rpx; background: skyblue; } ``` 3.在index.js文件中写对应的点击事件，在控制台输出对应的log ``` clickParent: function(){ console.log("clickParent") }, clickChild: function(){ console.log("clickChild") }, clickGrandson: function(){ console.log("clickGarandson") }, ``` 4.最后我们看下效果，仔细观察可以看到，我们点击界面3的时候，控制台输出了3行，分别是`clickParent`，`clickChild`，`clickGarandson`的点击事件，点击界面2的时候，控制台输出了`clickChild`和`clickParent`，这就说明了点击子view的时候，也会响应父view的事件，这就是冒泡事件了，相反的，点击子view，父view不会响应点击事件，这就是非冒泡事件了。  那么冒泡事件有哪些呢？ 上一节所提到的点击事件，长按事件，触摸事件都是冒泡事件，其余的都是非冒泡事件 ## 2.事件的绑定 ### 1.bind 上面的冒泡事件的例子就是使用bind的方式来绑定事件的 ### 2.catch 那么catch绑定事件和bind的绑定事件有什么不同呢？我们通过修改上面的例子来说明，我们把`grandson`的bindtap改为catchtap ``` <view class='parent' bindtap="clickParent"> 界面一 <view class='child' bindtap="clickChild"> 界面二 <view class='grandson' catchtap="clickGrandson"> 界面三 </view> </view> </view> ``` 然后我们看下运行的效果：  可以看到，我们使用catch的绑定事件后，点击界面3，是没有触发到父view的点击事件的 **总结：使用bind的绑定事件，是可以触发冒泡事件的，就是可以触发父view的事件 使用catch是不会触发冒泡事件**