事件系统

Event 事件对象

基础事件对象属性列表：

Event.Target

dataset 在组件中可以定义数据，这些数据将会通过事件传递给逻辑层。 以 data- 开头，由连字符 - 连接多个单词，所有字母必须小写，如 data-name，最终会在 event.target.dataset中拿到.

<div data-name="jack" onTap="myTap"></div>

import { Page, Props, Event } from 'waft';

export class Index extends Page {
  constructor(props: Props){
    super(props);
  }
  myTap(e: Event): void{
    const dataset = e.target.dataset;
      const name = dataset.getString("name");
  }
}

CustomEvent 自定义事件对象

CustomEvent 自定义事件对象（继承自 Event），属性列表如下：

detail

自定义事件所携带的数据。表单组件事件会携带用户的输入信息，如 Scroller组件 onScroll 触发时可通过 event.detail 获取用户选择的状态值。

<scroller onScroll="myScroll"></scroller>

import { Page, Props, Event, CustomEvent } from 'waft';


export class Index extends Page {
  constructor(props: Props){
    super(props);
  }
  myScroll(e: Event): void{
    const detail = (e as CustomEvent).detail;
  }
}

TouchEvent 触摸事件对象

TouchEvent 触摸事件对象（继承自 Event），属性列表：

touches 是一个数组，每个元素为一个 Touch 对象，表示当前停留在屏幕上的触摸点。
changedTouches 数据格式同 touches。 表示有变化的触摸点，可枚举的事件有：

• 从无变有（touchstart）
• 位置变化（touchmove）
• 从有变无（touchend）

  TouchPoint 对象

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

<div onTouchStart="myTouchStart" onTouchMove="myTouchMove" onTouchEnd="myTouchEnd"></div>

import { Page, Props, Event, TouchEvent } from 'waft';

export class Index extends Page {
  constructor(props: Props){
    super(props);
  }
  myTouchStart(e: Event): void{
      const changedTouches = (e as TouchEvent).changedTouches;
      const touchPoint = changedTouches[0];
  }
  myTouchMove(e: Event): void{
      const changedTouches = (e as TouchEvent).changedTouches;
      const touchPoint = changedTouches[0];
  }
  myTouchEnd(e: Event): void{
      const changedTouches = (e as TouchEvent).changedTouches;
      const touchPoint = changedTouches[0];
  }
}