什么是事务

• 事务是视图层到逻辑层的通讯方式。。
  。
• 事务可以将用户的行为反馈到逻辑层举行处理。。
  。
• 事务可以绑定在组件上，，，，，当抵达触发事务，，，，，就会执行逻辑层中对应的事务处理函数。。
  。
• 事务工具可以携带特殊信息，，，，，如id, dataset, touches。。
  。

事务的使用方式

• 在组件中绑定一个事务处理函数。。
  。

如bindtap，，，，，当用户点击该组件的时间会在该页面临应的Page中找到响应的事务处理函数。。
。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

• 在响应的Page界说中写上响应的事务处理函数，，，，，参数是event。。
  。

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

• 可以看到log出来的信息大致如下

  {
  "type": "tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset": {
     "hi": "WeChat"
    }
  },
  "currentTarget": {
    "id": "tapTest",
    "dataset": {
      "hi": "WeChat"
    }
  },
  "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,
  }],
  }

事务详解

事务分类

事务分为冒泡事务和非冒泡事务

1. 冒泡事务：当一个组件上的事务被触发后，，，，，该事务会向父节点转达。。
   。
2. 非冒泡事务：当一个组件上的事务被触发后，，，，，该事务不会向父节点转达。。
   。

WXML的冒泡事务列表：

注：除上表之外的其他组件自界说事务都是非冒泡事务，，，，，如<form/>的submit事务，，，，，<input/>的input事务，，，，，<scroll-view/>的scroll事务，，，，，(详见各个组件)

事务绑定

事务绑定的写法同组件的属性，，，，，以key、value的形式。。
。

• key以bind或catch开头，，，，，然后跟上事务的类型，，，，，如bindtap, catchtouchstart
• value是一个字符串，，，，，需要在对应的Page中界说同名的函数。。
  。否则当触发事务的时间会报错。。
  。

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

如在下边这个例子中，，，，，点击inner view会先后触发handleTap3和handleTap2(由于tap事务会冒泡到middle view，，，，，而middle view阻止了tap事务冒泡，，，，，不再向父节点转达)，，，，，点击middle view会触发handleTap2，，，，，点击outter view会触发handleTap1。。
。

<view id="outter" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

事务工具

如无特殊说明，，，，，当组件触发事务时，，，，，逻辑层绑定该事务的处理函数会收到一个事务工具。。
。

BaseEvent基础事务工具属性列表：

CustomEvent 自界说事务工具属性列表（继承 BaseEvent）：

type

通用事务类型

timeStamp

该页面翻开到触发事务所经由的毫秒数。。
。

target

触发事务的源组件。。
。

currentTarget

事务绑定的目今组件。。
。

说明： target 和 currentTarget 可以参考上例中，，，，，点击 inner view 时，，，，，handleTap3 收到的事务工具 target 和 currentTarget 都是 inner，，，，，而 handleTap2 收到的事务工具 target 就是 inner，，，，，currentTarget 就是 middle。。
。

dataset

在组件中可以界说数据，，，，，这些数据将会通过事务转达给 SERVICE。。
。誊写方式：以data-开头，，，，，多个单词由连字符-链接，，，，，不可有大写(大写会自动转成小写)如data-element-type，，，，，最终在 event.target.dataset 中会将连字符转成驼峰elementType。。
。

示例：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.target.dataset.alphabeta === 2 // 大写会转为小写
  }
})

touches

touches 是一个数组，，，，，每个元素为一个 Touch 工具（canvas 触摸事务中携带的 touches 是 CanvasTouch 数组）。。
。 体现目今停留在屏幕上的触摸点。。
。

Touch 工具

CanvasTouch 工具

changedTouches

changedTouches 数据名堂同 touches。。
。体现有转变的触摸点，，，，，如从无变有（touchstart），，，，，位置转变（touchmove），，，，，从有变无（touchend、touchcancel）。。
。

detail

自界说事务所携带的数据，，，，，如表单组件的提交事务会携带用户的输入，，，，，媒体的过失事务会携带过失信息，，，，，详见组件界说中各个事务的界说。。
。

点击事务的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。。
。