微信小程序（事件对象-绑定、冒泡、捕获）

原生组件

小程序中的部分组件是由客户端创建的原生组件，包含：

1. camera
2. canvas
3. input（仅在focus时表现为原生组件）
4. map
5. textarea
6. video

事件冒泡

事件触发验证

<view id="parent" bindtap="parentFn">
  <view id="child" bindtap="childFn"></view>
</view>

#parent{
  width: 200rpx;
  height: 200rpx;
  background-color: #ff5857;
}
#child{
  width: 100rpx;
  height: 100rpx;
  background-color: blue;
}

/**父级触发 */
parentFn(event){
  console.log(event);
},
/**子级触发 */
childFn(event){
  console.log(event);
},

事件冒泡验证

点击子级蓝色区域：

验证后发现事件发生冒泡，点击子级时，除了触发子级事件，还会冒泡到父级，触发父级绑定的事件

点击父级红色区域：

点击父级红色区域时，只会触发父级绑定的事件

target和currentTarget 属性的区别：

• t.target返回触发事件的元素
• event.currentTarget返回绑定事件的元素

例如：事件冒泡到父级时，触发事件源头为child，然后冒泡至parent，所以event.target为触发事件的元素，event.currentTarget为绑定事件的元素。

通俗理解：

• currentTarget为当前事件所绑定的组件
• target是触发该事件的源头组件

事件对象

当事件回调触发的时候，逻辑层绑定该事件的处理函数会收到一个事件对象，对象的详细属性如下：

属性	类型	说明
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组
currentTarget	Object	当前组件的一些属性值集合
target	Object	触发事件的组件的一些属性值集合
detail	Object	额外的信息
timeStamp	Integer（整数）	页面打开到触发事件所经过的毫秒数
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
type	String	事件类型
mark	Object	事件标记数据

事件对象event—touches

touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。

Touch对象：

属性	类型	说明
identifier	Number	触摸点的标识符
pageX,pageY	Number	距离文档左上角的距离，文档的左上角为原点，横轴为X轴，纵轴为Y轴
clientX.clientY	Number	距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

事件对象event—changedTouches

changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

事件对象event—target

属性	类型	说明
id	String	事件源组件的id
dataset	Object	事件源组件上由data-开头的自定义属性组成的集合

事件对象event—currentTarget

属性	类型	说明
id	String	事件源组件的id
dataset	Object	事件源组件上由data-开头的自定义属性组成的集合

事件对象event之dataset注意项：

• 在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。
• 在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：
  data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
  data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype

事件冒泡

阻止冒泡：

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

<view id="parent" bindtap="parentFn">
  <view id="child" catchtap="childFn"></view>
</view>

使用catch事件绑定后，此时点击蓝色子区域时，便不会再冒泡至父级区域

事件捕获

• 事件流包含事件冒泡与捕获，通过bind绑定会发生冒泡，catch则会阻止冒泡传播。自基础库版本 1.5.0 起，触摸类事件开始支持捕获阶段。
• 接下来介绍下事件捕获，首先要明确几点
  ①捕获阶段位于冒泡阶段之前
  ②绑定语法capture-bind、capture-catch

简单测试一下：

<view id="parent" bind:tap="fn1" capture-bind:tap="fn2">
  <view id="child" bind:tap="fn3" capture-bind:tap="fn4"></view>
</view>

fn1(){
console.log("fn1");
},
fn2() {
  console.log("fn2");
},
fn3() {
  console.log("fn3");
},
fn4() {
  console.log("fn4");
},

此时，再次点击子区域时触发顺序为上图所示，由此可以验证出捕获优先级高于冒泡。
注意：捕获阶段要求bind和catch后紧跟一个冒号，如bind:tap、catch:touchstart