Event object

Khi một component kích hoạt event, logic layer chứa event handler sẽ nhận 1 event object

BaseEvent object

Thuộc tính	Kiểu dữ liệu	mô tả
type	string	Loại event
timeStamp	integer	Thời gian mà event được sinh ra
target	Object	Tập hợp các thuộc tính của component kích hoạt sự kiện.
currentTarget	Object	Tập hợp các giá trị thuộc tính của component hiện tại

type

Event type ví dụ: event onTap thì type sẽ là tap

timeStamp

Thời gian mà event được sinh ra theo dạng UNIX timestamp

target

dataset Data được define ở trong component, và được gửi qua logic layer thông qua events. Ở file .txml, data được đặt tên bắt đầu bằng data-, phần sau theo format tất cả chữ cái đều viết thường và nối với nhau bằng dấu -. Ví dụ:

<view data-view-name="Test View" onTap="tapName"/>

Khi gửi qua lớp logic thông qua events, thì data được lấy ra thông qua event.target.dataset.viewName

currentTarget

Với những bubbling event thành phần handle sự kiện với thành phần trigger sự kiện có thể khác nhau. Ví dụ:

 <view onTap="onTap">Parent View<view>Clickable view</view></view>

Trong trường hợp này currentTarget sẽ là thành phần handle sự kiện (Parent View) và target sẽ là thành phần kích hoạt sự kiện (Clickable view).

Đổi với non-bubbling hoặc chính target handle cũng chính là thành phần kích hoạt sự kiện thì giá trị của target và currentTarget sẽ giống nhau.

Page({
  tapName(event) {
    console.log(event.target.dataset.viewName); // console log sẽ in ra giá trị Test View
  }
});

The target object sẽ có các thuộc tính:

Thuộc tính	Kiểu dữ liệu	Mô tả
id	string	id của component
tagName	string	Component type ví dụ view
dataset	Object	Tập hợp các thuộc tính của dataset được define bắt đầu bằng data-

TouchEvent event object

TouchEvent touch event object (kế thừa từ BaseEvent), attribute list:

Thuộc tính	Kiểu dữ liệu	Mô tả
id	string	id của component
touches	Array	Mảng các điểm được touch trên màn hình
changedTouches	Array	Mảng chứa thông tin thay đổi của các điểm được touch

touches Là 1 mảng mà mỗi thành phần là 1 touch object, chứa thông tin toạ độ điểm được touch trên màn hình. changedTouches là 1 mảng giống như touches nhưng sẽ chỉ ra sự thay đổi của các điểm được touch. Ví dụ onTouchStart thì changedTouches sẽ thay đổi từ mảng rỗng sang mảng các điểm được touch onTouchMove thì changeTouches sẽ thay đổi toạ độ các điểm được touch onTouchEnd, onTouchCancel thì changeTouches sẽ thay đổi về mảng rỗng.

Touch object

Thuộc tính	Kiểu dữ liệu	mô tả
identifier	number	id của touch point
pageX, pageY	number	Khoảng cách từ góc trên bên trái của page góc trên bên trái là điểm gốc, trục hoành là trục X và trục tung là trục Y.
clientX, clientY	number	Khoảng cách từ góc trên bên trái của page (trừ navigation bar), góc trên bên trái là điểm gốc, trục hoành là trục X và trục tung là trục Y.

Example

Ví dụ sự kiện onTap khi user click vào 1 view

<view data-view-name="Test View" onTap="tapName"/>

Khi gửi qua lớp logic thông qua events, thì data được lấy ra thông qua event.target.dataset.viewName

Page({
  tapName(event) {
    console.log(event.target.dataset.viewName); // console log sẽ in ra giá trị Test View
  }
});

Quan sát console log, chúng ta sẽ thấy:

{
  "type": "tap",
  "currentTarget": {
    "tagName": "view",
    "dataset": {
      "view-name": "Test view"
    }
  },
  "target": {
    "tagName": "view",
    "dataset": {
      "view-name": "Test view"
    },
    "targetDataset": {
      "view-name": "Test view"
    }
  },
  "timeStamp": 1611557634256
}

Animation Event object

Animation Object là event object của các sự kiện liên quan tới Animation bao gồm:

• onTransitionEnd: sự kiện này được kích hoạt khi CSS transition hoàn tất.
• onAnimationStart: sự kiện này được kích hoạt khi CSS Animation bắt đầu thực thi.
• onAnimationIteration: sự kiện này được kích hoạt khi CSS Animation kết thúc 1 iteration.
• onAnimationEnd: sự kiện này được kích hoạt khi CSS Animation kết thúc.

Ngoài thuộc tính của Base Object,Transition event sẽ có thêm các thuộc tính:

Thuộc tính	Kiểu dữ liệu	Mô tả
elapsedTime	number	Khoảng thời gian theo giây animation đã thực thi
propertyName	string	Tên của thuộc tính gắn với transition.

Các Animation Object sẽ có thêm các thuộc tính sau:

Thuộc tính	Kiểu dữ liệu	Mô tả
elapsedTime	number	Khoảng thời gian theo giây animation đã thực thi
animationName	string	Tên của thuộc tính CSS gắn với animation.