mPaas事件

mPaas_事件

1. 事件定义

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

2. 使用方式

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

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
• 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

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

• key 以 on 或 catch 开头，再加上事件的类型，如 onTap、catchTap。
• value 是一个字符串，需要在对应的 Page 中定义同名的函数。否则当触发事件时会报错。

on 事件绑定不会阻止冒泡事件向上传递，catch 事件绑定可以阻止冒泡事件向上传递。

冒泡事件列表：

类型	触发条件
touchStart	触摸动作开始
touchMove	触摸后移动
touchEnd	触摸动作结束
touchcancel	触摸动作被打断，如来电提醒，弹窗
tap	触摸后马上离开
longTap	触摸后，超过 300 ms 再离开

其他事件则不冒泡：

在页面（page）/组件(componennt)中绑定一个事件处理函数。

如 onTap，当用户点击该组件的时候会在该页面对应的 Page 中找到对应的事件处理函数。在自定义组件中，在对应的 组件 methods方法 中定义事件处理函数。

3. 事件对象

当组件/页面触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

• BaseEvent：基础事件对象属性列表。

  属性	类型	描述
  type	String	事件类型
  timeStamp	Integer	事件生成时的时间戳
  target	Object	触发事件的组件的属性值集合

• CustomEvent：自定义事件对象属性列表（继承 BaseEvent）。

  属性	类型	描述
  detail	Object	额外的信息

• TouchEvent：触摸事件对象属性列表（继承 BaseEvent）。

  属性	类型	描述
  touches	Array	当前停留在屏幕中的触摸点信息的数组
  changedTouches	Array	当前变化的触摸点信息的数组

• Type：事件的类型。

• timeStamp：页面打开到触发事件所经过的毫秒数。

• target：触发事件的源组件。

  属性	类型	描述
  id	String	事件源组件的 ID
  tagName	String	当前组件的类型
  dataset	Object	绑定事件的组件上由 data- 开头的自定义属性的集合
  targetDataset	Object	实际触发事件的组件上由 data- 开头的自定义属性的集合

dataset

在组件中可以定义数据，这些数据将会通过事件传递给逻辑层。

书写方式： 以 data- 开头，多个单词由连字符（-）链接，不能有大写（大写会自动转成小写），如 data-element-type，最终会在 event.target.dataset 中会将连字符转成驼峰 elementType。

touches

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

• Touch 对象

  属性	类型	描述
  identifier	Number	触摸点的标识符
  pageX, pageY	Number	距离文档左上角的距离，左上角为原点，横向为 X 轴，纵向为 Y 轴
  clientX, clientY	Number	距离页面可显示的区域（屏幕除去导航条）左上角距离，横向为 X 轴，纵向为 Y 轴

• CanvasTouch 对象

  属性	类型	描述
  identifier	Number	触摸点的标识符
  x, y	Number	距离 Canvas 左上角的距离，Canvas 的左上角为原点，横向为 X 轴，纵向为 Y 轴

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

• detail：自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入信息，媒体的错误事件会携带错误信息，详细的描述请参考组件定义中各个事件的定义。