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

原生组件
原小程序中的部分组件是由客户端创建的生组件，包含：
1.camera 2.canvas 3.input(仅在focus时表现为原生组件) 4.map 5.textarea 6.video
事件冒泡

#parent{
  width: 200rpx;
  height: 200rpx;
  background: pink;
}
#child{
  width: 100rpx;
  height: 100rpx;
  background: lemonchiffon;
}

parentFn(event){
    console.log(event)
  },
  childFn(event){
    console.log(event)
  },

效果如下：

当点击子级时：

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

当点击父级时：（只会触发父级绑定的事件）

target和currentTarget 属性的区别：
event.target返回触发事件的元素
event.currentTarget返回绑定事件的元素
例如：事件冒泡到父级时：
触发事件源头为child，然后冒泡至parent，所以event.target为触发事件的元素，event.currentTarget为绑定事件的元素。
通俗理解：
currentTarget为当前事件所绑定的组件
target是触发该事件的源头组件
事件对象
当事件回调触发的时候，逻辑层绑定该事件的处理函数会收到一个事件对象，对象的详细属性如下，

事件对象event

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


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




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

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

使用catch事件绑定后，此时点击子级区域，便不会在冒泡到父级区域。

事件捕获
事件流包含事件冒泡与捕获，通过bind绑定会发生冒泡，catch则会阻止冒泡传播。触摸类事件开始支持捕获阶段。
事件捕获，明确几点：
1.捕获阶段位于冒泡阶段之前
2.绑定语法capture-bind、capture-catch

简单测试：

#box{
  width: 200rpx;
  height: 200rpx;
  background: powderblue;
}
#boxChild{
  width: 100rpx;
  height: 100rpx;
  background: peachpuff;
}

boxFn1(event){
    console.log("fn1")
  },
  boxFn2(event){
    console.log("fn2")
  },
  fn3(event){
    console.log("fn3")
  },
  fn4(event) {
    console.log("fn4")
  },

此时再电机加子级区域触发顺序为如下：

由此验证出捕获优先级高于冒泡。
注意：捕获阶段要求bind和catch后紧跟一个冒号，如bind:tap、catch:touchstart