事件对象

• 事件对象分为冒泡事件和非冒泡事件，冒泡事件指的是当一个组件上的事件被触发后，这个事件会向父容器节点传递，非冒泡事件则不会向父容器传递，在小程序中时间的绑定是通过bind或者catch关键字+事件名来绑定事件的如bindTap或者catchTap，其中bindTap不能阻断冒泡事件而catchTap可以阻止冒泡事件。
  在WXML中这些事件默认是冒泡的：touchstart：手指触摸动作开始touchmove：手指触摸后移动，touchcancel：手指触摸动作被打断，如来电，弹窗等，touchend：触摸结束，tap：触摸后立马离开，longtap：触摸超过350mm离开。
  如下的冒泡事件(注意bind方式和catch方式控制台打印的不同结果)：

   view1   ">   view2   <view bindtap="tap3">view3</view>   </view> </view> <view bindtap="tap1"> view1   <view catchtap="tap2">   view2   <view bindtap="tap3">view3</view>   </view> </view> Page({ tap1:function(){   console.log("view1");   },   tap2: function () {   console.log("view2");   },   tap3: function () {   console.log("view3");   } })

  bind绑定的点击view1只输出一次后台日志；点击view2会输出两次一次当前节点一次父节点；点击view3会输出3次，当前节点，父节点，祖父节点。
  
  catch绑定的点击view1只输出一次因为view1没有父节点；点击view2也只打印了一次为什么呢，因为view2
  的事件绑定用的是catch，将冒泡事件阻断掉了；同理点击view3执行了两次，也是到view2就阻断掉了，可见只要遇到catch冒泡事件就会在当前这个节点中断掉
  

• 事件对象

<!--事件对象--><view bindtap="myEvenet"id="parent">事件对象<view bindtap="myEvenet" id="children" data-name="dataname" data-id="id">view3</view></view>Page({  myEvenet:function(event){    console.log(event);  }})

事件对象属性分为3类：BaseEvent、CustomEvent、TouchEvent。
(一)BaseEvent对象属性：
type:事件类型（这里的类型是tap，也就是bind或者catch后边的就是类型）
timeStamp：页面打开到触发所经过的毫秒数
target：触发事件源组件的相关属相集合

1. id：事件源组件的id
2. dataset：事件源组件上由data-开头的自定义属性组成的集合，可以用来传参数

currentTarget：事件绑定到当前组件的相关属性集合（非冒泡组件没有这个属性）

1. id：事件源组件的id
2. dataset：当前组件data-开头的自定义属性组成的集合，可以用来传参数

从描述可以看出来target是获取点击源的组件的相关信息，也就是说即使我点的是children这个节点，最终冒泡到parent节点了，但是target里边存的信息都是children里边的信息，而currentTarget存的是当前控件也就是本身的信息

这个输出时我点击children节点冒泡到父节点的父节点触发myEvent事件的事件对象，很明显输出来的信息和我描述的是一致的
其中的dataset数据方式，多个单词用连字符“-”连接，连字符最终会被转换成峰驼式的样式，属性名最好不要用大写（大写最终会被转为小写）

Page({  myEvenet:function(event){    console.log(event.currentTarget.dataset.id);//这里如果换成event.currentTarget.dataset.Id会返回一个undefined  }})<view bindtap="myEvenet" id="children" data-my-name="myname" data-Id="id">view3</view>]//调试结果{id: "id", myName: "myname"}

在这里可以清楚看到我上边文字描述的内容
(二)CustomEvent为自定义对象事件（集成BaseEvent），只有一个属性：

1. detail：额外信息，通常用来传递特殊信息（在不同的控件里表现形式不同参考api）

<form bindsubmit="formSubmit" >  <view>    <view >checkbox</view>    <checkbox-group name="checkbox">      <label><checkbox value="checkbox1"/>checkbox1</label>      <label><checkbox value="checkbox2"/>checkbox2</label>    </checkbox-group>  </view>  <view >    <button formType="submit">Submit</button>  </view></form>Page({  formSubmit:function(event){    console.log(event.detail.value);  }})//输出结果Object {checkbox: Array[0]}

（三）TouchEvent触摸事件对象（集成BaseEvent）
touches：触摸事件，当前停留在屏幕中的触摸点击信息的数组
changedTouches：触摸事件，当前变化的触摸点数组

1. Touch对象（canvas组件中是CanvasTouch对象）
   identifier：触摸点标示符
   pageX，pageY：距离文档左上角距离
   clientX，clientY:距离页面可显示区域距离（去除导航条）