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

拓展：
原生组件
小程序中的部分组件是由客户端创建的原生组件，包含：
①camera
②canvas
③input（仅在focus时表现为原生组件）
④map
⑤textarea
⑥video

一·事件冒泡

①事件触发验证

  


#parent{
  width: 100%;
  height:300rpx;
  background: green;
}
#child{
  width: 200rpx;
  height: 200rpx;
  background: orange;
}

/** 
   * any
 */
  parentFn(option){
    console.log(option)
  },
  childFn(option) {
    console.log(option)
  },

②事件冒泡验证-----点击子元素

------------点–击--父–元--素------------

拓展： target和currentTarget 属性的区别
1）
event.target返回触发事件的元素----触发事件的元素
event.currentTarget返回绑定事件的元素----绑定的元素出发

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

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

二·事件对象

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

二-----1）事件对象event

①—touches

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

②—changedTouches

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

③—target

④—currentTarget



★★★dataset注意项★★★
①：在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。
②：在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。

三·事件冒泡

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

四·事件捕获

事件流包含事件冒泡与捕获，通过bind绑定会发生冒泡，catch则会阻止冒泡传播。但是自基础库版本 1.5.0 起，触摸类事件开始支持捕获阶段。

事件捕获，首先要明确几点
①捕获阶段位于冒泡阶段之前
②绑定语法capture-bind、capture-catch

注意：捕获阶段要求bind和catch后紧跟一个冒号，如bind:tap、catch:touchstart

课堂总结

事件绑定、冒泡、捕获总结
（1）原生组件
（2）事件冒泡
（3）事件对象
（4）事件捕获