小程序3——路由、事件流、事件绑定和冒泡

官方文档： https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html

一、路由方式

1. Tab切换
   
   

二、事件流

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

点击事件
index.wxml

<button bindtap='clickme'>click</button>

index.js

clickme: function (e) {
    console.log(e)
  }

属性	说明
tap	触发的事件类型
timeStamp	事件生成时的时间戳
currentTarget	当前组件的一些属性值集合
target	触发事件的组件的一些属性值集合
touches	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	触摸事件，当前变化的触摸点信息的数组
detail	自定义事件所携带的数据，点击事件的detail 带有的 x, y

三、事件绑定和冒泡

index.wxml

<view class='containA' bindtap='clicka'>
  <view class='containB' bindtap='clickb'>
    <view class='containC' bindtap='clickc'>
    </view>
  </view>
</view>

index.js

clicka: function () {
	console.log('a')
},
clickb: function () {
	console.log('b')
},
clickc: function () {
	console.log('c')
}

点击container-C时，控制台依次打印出：
c
b
a

四、事件的捕获阶段

修改index.wxml、index.js文件

index.wxml

<view class='containA' bindtap='clicka' capture-bind:tap='captureClickA'>
  <view class='containB' bindtap='clickb' capture-bind:tap='captureClickB'>
    <view class='containC' bindtap='clickc' capture-catch:tap='captureClickC'>
    </view>
  </view>
</view>

index.js

clicka: function () {
	console.log('a')
},
clickb: function () {
    console.log('b')
},
clickc: function () {
	console.log('c')
},
captureClickA: function () {
	console.log('captureA')
},
captureClickB: function () {
	console.log('captureB')
},
captureClickC: function () {
	console.log('captureC')
},

点击container-B时，控制台依次打印出：
captureA
captureB
b
a

总结

1. bind绑定的事件发生在冒泡阶段，并且继续向上冒泡触发事件。
2. catch绑定的事件发生在冒泡阶段，但阻止冒泡事件向上冒泡。
3. capture-bind绑定的事件发生在捕获阶段，并继续触发其他绑定的捕获、冒泡事件。
4. capture-catch绑定的事件发生在捕获阶段，会中断捕获阶段和取消冒泡阶段，即事件触发到目标元素之后，不再进行捕获和冒泡。