事件介绍

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发条件，就会执行逻辑层中对应的事件函数。
• 事件对象可以携带额外信息，如 id、dataset、touches。

  使用方式

  若要在组件中绑定一个事件处理函数，如onTap，则需要在该页面的.js文件中的Page里定义onTap对应的事件处理函数。

  <view id="tapTest" data-hi="Alipay" onTap="tapName">
  <view id="tapTestInner" data-hi="AlipayInner">
    Click me! 
  </view>
  </view>

在相应的Page中定义相应的事件处理函数tapName，参数为事件对象 event。

Page({
  tapName(event) {
    console.log(event);
  },
});

控制台输出 event 信息如下所示：

{
  "type": "tap",
  "timeStamp": 1550561469952,
  "target": {
    "id": "tapTestInner",
    "dataset": {
      "hi": "Alipay"
    },
    "targetDataset": {
      "hi": "AlipayInner"
    }
  },
  "currentTarget": {
    "id": "tapTest",
    "dataset": {
      "hi": "Alipay"
    }
  }
}

使用组件（基础组件、扩展组件和自定义组件）时，组件里有哪些可用的事件取决于组件本身是否支持，支持的事件会在具体组件的文档里明确列出。

事件类型

事件分为冒泡事件和非冒泡事件：

• 冒泡事件：以关键字on为前缀，当组件上的事件被触发，该事件会向父节点传递。
• 非冒泡事件：以关键字catch为前缀，当组件上的事件被触发，该事件不会向父节点传递。

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

• key 以on或catch开头，然后跟上事件的类型，如onTap、catchTap。
• value 是一个字符串，对应 Page 中定义的函数名，不存在时触发事件会报错。

  <view id="outter" onTap="handleTap1">
  view1
  <view id="middle" catchTap="handleTap2">
    view2
    <view id="inner" onTap="handleTap3">
      view3
    </view>
  </view>
  </view>

  上述代码中，点击view3会先后触发handleTap3和handleTap2（因为tap事件会冒泡到view2，而view2阻止了tap事件冒泡，不再向父节点传递），点击view2会触发handleTap2，点击view1会触发handleTap1。
  所有会发生冒泡的事件：