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

一、路由方式

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

1. Tab切换
   
   

二、事件的使用方式及传参

1、事件分类

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

2、事件使用

在组件中绑定一个事件处理函数。
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

index.wxml

<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
<!-- <view id="tapTest" bindtap="tapName(param)">Click me!</view>   这样传参是错的 -->

index.js

Page({
  tapName(event) {
    console.log(event)
  }
})

控制台打印

{
  "type": "tap",
  "timeStamp": 895,
  "target": {
    "id": "tapTest",
    "dataset": {
      "hi": "WeChat"
    }
  },
  "currentTarget": {
    "id": "tapTest",
    "dataset": {
      "hi": "WeChat"       // 参数通过 event.currentTarget.dataset 来获取
    }
  },
  "detail": {
    "x": 53,
    "y": 14
  },
  "touches": [
    {
      "identifier": 0,
      "pageX": 53,
      "pageY": 14,
      "clientX": 53,
      "clientY": 14
    }
  ],
  "changedTouches": [
    {
      "identifier": 0,
      "pageX": 53,
      "pageY": 14,
      "clientX": 53,
      "clientY": 14
    }
  ]
}

在相应的Page定义中写上相应的事件处理函数，参数是event。

3、事件传参

小程序中事件额外的参数是用 data-* 传递的，参数中data-xxx 后面的参数不能用驼峰，是用 - 连接，会自动生成驼峰标识符。

index.wxml

<view bindtap="myFunction" data-my-id="123456"></view>

index.js

Page({
	myFunction (e) {
		// 参数是通过 e.currentTarget.dataset 的属性获得的
		console.log(e.currentTarget.dataset.myId)  // 此处的 id 就是额外传递的 data-my-id
	}
})

三、事件流

官方文档：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

1、捕获、冒泡阶段

四、事件绑定和冒泡

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绑定的事件发生在捕获阶段，会中断捕获阶段和取消冒泡阶段，即事件触发到目标元素之后，不再进行捕获和冒泡。